CSS 그리드로 간단한 양식 만들기

NET Framework에서 Flexbox를 사용하여 간단한 양식을 만드는 방법을 배웠습니다. 오늘은 CSS Grid로 동일한 것을 만드는 방법을 이해하게 될 것입니다.

우리가 만들고 있는 것은 다음과 같습니다.

CSS 그리드로 양식 작성

위의 그림에서 양식에 두 가지 요소가 포함되어 있음을 알 수 있습니다.

이메일 필드

제출 버튼

HTML은 다음과 같습니다.

<form>
  <input type="email" name="email"> 
  <button type="submit">Send</button>
</form>

CSS 그리드로 양식을 작성하려면 부모의 display 속성을 grid 로 설정해야 합니다.

form {
  display: grid;
}

다음과 같은 결과를 얻을 수 있습니다.



왜 우리는 두 개의 행을 얻었습니까?

그리드의 열 수를 지정하지 않았기 때문에 두 개의 행을 얻습니다. 브라우저는 항상 하나의 열로 기본 설정됩니다.

이 양식의 경우 두 개의 열을 설정해야 합니다.

사용 가능한 공간을 채우도록 첫 번째 열이 확장되어야 합니다

.

두 번째 열은 내용에 따라 크기를 조정해야 합니다

.

첫 번째 열에는 fr 단위를 사용할 수 있습니다. 두 번째 열에는 auto를 사용할 수 있습니다.

form {
  display: grid;
  grid-template-columns: 1fr auto;
}

이것으로 폼의 레이아웃을 완성했습니다. 플레이할 수 있는 Codepen은 다음과 같습니다.

Simple form with CSS Grid에서 Zell Liew(@zellwk)의 펜CodePen을 참조하십시오.

요소의 높이가 다른 경우...

button 의 텍스트를 SVG로 대체하여 높이가 다른 요소를 시뮬레이션합니다. .

<form action="#">
  <input type="email" placeholder="Enter your email">
  <button type="button"><svg> <!-- a smiley icon --> </svg></button>
</form>

스마일 아이콘을 제출 버튼에 추가


큰 SVG 아이콘에 맞게 input 의 높이도 증가합니다! 다시 한 번 추가 코드를 작성할 필요가 없습니다. 이는 그리드 항목이 사용 가능한 공간을 채우기 위해 세로로 늘어나기 때문에 발생합니다.

이 동작을 변경하려면 align-items 속성을 start , end 또는 center 로 변경할 수 있습니다.

align-itemns를 다른 값으로 설정하면 항목이 다르게 정렬될 수 있습니다.


플레이할 수 있는 Codepen은 다음과 같습니다.

Simple form with CSS Grid (with SVG Button)에서 Zell Liew(@zellwk)의 펜CodePen을 참조하십시오.

마무리

CSS Grid를 사용하면 레이아웃을 쉽게 만들 수 있습니다. 매크로 레이아웃에 사용할 필요는 없습니다. 여기에서 본 양식 예제와 같은 마이크로 레이아웃에도 사용할 수 있습니다.

CSS 그리드와 함께 즐기세요!


읽어 주셔서 감사합니다. 이 기사는 원래 my blog에 게시되었습니다. 더 나은 프런트엔드 개발자가 되는 데 도움이 되는 더 많은 기사를 보려면 my newsletter에 가입하세요.