[HTML, CSS] 그리드(Grid) 레이아웃 - 컨테이너 편

그리드(Grid) 레이아웃은 행과 열을 지원하는 격자식 구조입니다. 

2차원 상에서 요소들을 배치하기가 직관적이기 때문에 웹페이지를 디자인하는 것이 쉽다는 장점이 있습니다. 

 

1차원 상에서 요소들을 배치하는 플렉스 레이아웃에 대해서는 각각 컨테이너 편과 아이템 편으로 나누어서 설명했으니 참고하시길 바랍니다.

→ [HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편

→ [HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편

 

그리드 레이아웃을 시작하는 방법은 가장 먼저 display 속성을 grid 또는 inline-grid로 설정해줘야 합니다.

.container {
  display: grid;
  /* display: inline-grid; */
}

 

그리드 레이아웃은 플렉스 레이아웃과 마찬가지로 부모 요소인 그리드 컨테이너(Grid Container)와 자식 요소인 그리드 아이템(Grid Item)으로 나누어집니다. 

 

① 아이템들 사이 간격 설정

그리드 아이템들이 2차원 구조로 나열되면 자연스레 가로축(row)과 세로축(column)이 설정됩니다. row 사이의 간격은 row-gap 속성으로, column 사이의 간격은 column-gap 속성을 통해 설정할 수 있습니다.

gap 속성은 row-gap 속성과 column-gap 속성을 같이 설정할 수 있는 단축 속성입니다. 두 가지 값을 전달하면 첫 번째 값이 row-gap, 두 번째 값이 column-gap이 됩니다. 만약 값을 하나만 전달하면 두 가지 속성이 같은 값으로 설정됩니다. 

.grid-container_gap {
  display: grid;
  row-gap: 20px;
  column-gap: 50px;
  /* gap: 20px 50px */
}

 

1

2

3

4

5

6

7

8

9

 

② 그리드 구조 수동 설정

grid-template-rows 속성은 그리드 레이아웃에서 각 row의 높이를 지정해줍니다. 마찬가지로 grid-template-columns 속성은 그리드 레이아웃에서 각 column의 너비를 지정해줍니다.

다음과 같이 띄어쓰기로 구분한 리스트를 전달하면, 각 값이 해당 row/column의 높이/너비 값이 됩니다. 이때 전달되는 값의 개수에 따라서 row와 column의 개수가 정해지게 됩니다. 만약 아이템의 개수가 row나 column에 들어갈 수 있는 수보다 많다면 자동으로 새로운 row가 만들어집니다. 전달되는 값은 실제 크기, fr 단위, auto 등을 혼용할 수 있습니다.

* fr은 fraction을 뜻하는 단위로 fr 단위를 사용하는 아이템끼리 정해진 비율대로 여유공간을 나누어 가집니다. 

.grid-container_template {
  display: grid;
  grid-template-columns: 10% 1fr 2fr auto;
}

 

1

2

3

4

 

px이나 %등으로 설정한 아이템들이 먼저 공간을 차지하고, fr 단위로 설정한 아이템들이 여유공간을 나눠 가지게 되어 auto로 설정된 아이템들은 최소 공간을 가지게 됩니다. 만약 모두 auto로 설정되어 있다면 자동으로 최대 공간을 가지게 됩니다. 

 

1

2

3

4

5

6

7

8

grid-template-columns: auto auto auto auto;

 

- repeat(n, x)

repeat 함수는 x 값을 n번 반복시켜주는 함수입니다. grid를 생성할 때 같은 값을 여러번 반복해야 할 때 사용할 수 있습니다.

.grid-container_repeat {
  grid-template-columns: repeat(3, 1fr 2fr);
  /* grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr */
}

 

- minmax(min, max)

minmax 함수는 min 값을 최솟값으로, max 값을 최댓값으로 지정하는 함수입니다. 

ex1) minmax(200px, auto)는 최소한 200px의 크기를 가지고, 최대는 auto(자동으로) 늘어난다는 의미입니다. 

 

③ 그리드 구조 자동으로 설정

앞서 설명드린 grid-template-rows 속성과  grid-template-columns 속성은 row와 column의 개수를 지정해준다는 특징이 있습니다. 따라서 만약 row와 column의 개수가 예상한 것과 다르거나, 코드를 작성할 때 그 개수를 알지 못한다면 그리드 구조를 수동으로 설정하기에는 어려움이 있습니다. 

이때 사용할 수 있는 것이 grid-auto-rows 속성과  grid-auto-columns 속성입니다. 크기를 지정하거나 크기와 관련된 조건을 지정해주기만 하면, 그 개수는 자동으로 채워지게 됩니다. 

 

가장 자주 사용되는 유형은 grid-template-columns 속성으로 column의 크기를 정해놓은 뒤, grid-auto-rows 속성으로 높이에 대한 조건을 설정하는 것이다. 이 방법은 아이템이 늘어나도 자동으로 row를 추가된다는 편리함이 장점이다. 

 

1

2

3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

5

6

grid-auto-rows: minmax(100px, auto);

grid-template-columns: 1fr 1fr 1fr;