CSS 레이아웃 배치하기 - Grid

Grid

지난 Flex 포스팅에 이어서 이번에는 Grid입니다. 격자라는 의미를 가진 Grid는 그 이름처럼 판 위에 가로 행과 세로 행을 기준으로 요소들을 배치할 수 있습니다. table과도 비슷한 면이 있는데, 보다 다양한 레이아웃의 구성을 더 쉽게 할 수 있다는 특징이 있습니다. 예를 들면 자식 요소들끼리 겹치게 배치되는 형태도 간단히 구현할 수 있게 됩니다.

 

Grid도 Flex와 마찬가지로, 부모가 될 요소에 display: grid; 속성을 할당하는 것으로 간단히 적용할 수 있습니다.

 

 

Grid container의 형태 결정하기

위에서 Grid는 가로 행과 세로 행을 기준으로 요소를 배치한다고 설명했습니다. 따라서 한 쪽만 지정하는 Flex 컨테이너와는 다르게, Grid 컨테이너는 가로와 세로의 형태를 모두 지정해서 사용합니다.

 

grid-template-rows / grid-template-columns

grid-template-rows: 1fr 1fr 1fr; // 1 : 1 : 1 비율로 가로 행 정렬
grid-template-columns: 1fr 1fr 1fr; // 1 : 1 : 1 비율로 세로 행 정렬

 

 

 

 

각각의 행에 비율을 설정해주었습니다. 같은 비율로 여러 행을 설정해줘야 한다면 1fr을 반복해서 적는 대신, repeat 키워드를 사용하여 repeat(3, 1fr); 처럼 사용할 수도 있습니다. 또한, 비율이 아니라 100px 처럼 정해진 값이여도 좋습니다.

 

minmax

minmax 키워드를 이용하면 각 요소의 최대/최소값을 지정해 줄 수 있습니다. 

 

grid-template-columns: 1fr 1fr minmax(100px, 300px); // 마지막 요소 최소 100px, 최대 300px
grid-template-columns: 1fr 1fr minmax(100px, auto); // 마지막 요소 최소 100px, 최대는 자동으로 확장

 

요소의 크기를 지정하는 것보다, 한 줄에 몇 개의 요소가 들어갈지 정하는게 필요할때는 auto-fit과 auto-fill을 이용합니다.

 

grid-template-columns: repeat(auto-fill, minmax(20%, auto)); // 공간이 남으면 비움
grid-template-columns: repeat(auto-fit, minmax(20%, auto)); // 공간이 남으면 자동으로 채움

 

auto-fill을 사용하면 요소의 내용이 넘치지 않고, 요소가 컨테이너를 꽉 채우기엔 부족할 경우 minmax의 최솟값(20%) 을 그대로 유지하여 공간을 비워둡니다.

 

반대로 auto-fit을 사용하면 요소가 컨테이너를 꽉 채우기에 부족할때, minmax의 최대가 auto일 경우 컨테이너를 꽉 채우도록 크기를 자동으로 조절합니다.

 

 

grid-auto-rows / grid-auto-columns

만약, 동적으로 요소를 추가해야 하는 레이아웃이라면 사전에 몇 개가 들어갈지 정해두기 애매한 경우가 있습니다. 이럴때는 grid-auto-* 속성을 이용합니다.

 

grid-auto-rows: minmax(100px, auto); // 행에 자동으로 배치
grid-auto-columns: minmax(100px, auto); // 열에 자동으로 배치

 

어떤 요소가 들어가냐에 따라 잘 고려하면 grid-template-* 선에서 지정해 줄 수도 있겠지만, grid-auto-* 속성을 이용하면 복잡하게 생각할 필요없이 처리할 수 있겠네요.

 

 

 

Grid 요소의 간격 설정

격자 배치라고는 하지만 요소들이 너무 딱 붙어있게 되면 답답한 느낌을 줄 수 있습니다. 이럴때 우리는 padding이나 margin을 적절히 이용했었는데, grid에서는 flex에서 한 것 처럼 각 요소 사이의 간격을 지정해 줄 수 있습니다.

 

row-gap / column-gap

row-gap을 사용하면 행 간격을 지정합니다. 같은 원리로 column-gap을 사용하여 열 간격도 지정할 수 있습니다.

 

row-gap: 1rem; // 가로 행 간 거리를 1rem으로 설정.
column-gap: 1rem; // 세로 행 간 거리를 2rem으로 설정.

 

 

 

 

gap으로 두 간격을 한 번에 지정해주는것도 가능합니다.

 

gap: 1rem 2rem; // row-gap : 1rem, column-gap: 2rem

 

 

 

Grid 요소 직접 배치하기

grid-template-areas를 이용하면 grid를 가장 직관적으로 사용할 수 있습니다.

 

grid-template-areas:
  'total total total total'
  'modify modify modify operator'
  'digit digit digit operator'
  'digit digit digit operator'
  'digit digit digit operator'
  'digit digit digit operator';

 

계산기 모양을 만들때 사용했던 코드인데, grid-template-areas를 이용해 전체적인 레이아웃을 잡아준 모습입니다. 각각의 영역에 이름을 부여해 모양을 잡아주고, 나중에 사용할때는 grid-area: digit; 처럼 해당하는 영역의 이름을 가져와 나머지 속성들을 지정해줍니다.

 

예를 들어 숫자 부분(digit)을 마저 구현한다면 이런 모양이겠네요.

 

.digit {
  grid-area: digit; // grid-template-areas 에서 지정한 이름
  ... // 나머지 속성들 부여하기
}

 

grid로 구현한 계산기

 

 

마무리

두 포스트에 걸쳐 flex과 grid에 대해 알아보았습니다. 포스트에 작성된 내용이 전부는 아니니, 필요할때마다 계속 찾아가며 사용해보면서 감을 잡으면 좋을 것 같습니다.

 

참고 문서

이번에야말로 CSS Grid를 익혀보자 - 1분 코딩

CSS 그리드 레이아웃 - MDN Web Docs