[CSS] display : grid 정리

1. 개요

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.

 

테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다.

하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다.

예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.

 

flex와 grid의 차이점은

flex : 한 방향 레이아웃 시스템 (1차원)

grid : 두 방향(가로-세로) 레이아웃 시스템 (2차원)

이라는 점입니다.

 

 

 

 

2. 사용법

flex를 display: flex로 사용했던 것처럼 grid 또한 display: grid로 선언해서 사용할 수 있습니다.

flex와 같이 grid를 선언한 부모는 Grid Container가 되고 그 부모 밑의 요소들은 Grid Items이 됩니다.

 

 

1) grid- template-*

그리드에는 표에서 사용하는 것과 같은 행과 열(row, column)이 존재합니다.

 

위 그림을 보면 이해가 편하실텐데, 2차원 표로 생각해보면 2행 3열의 표라고 표현할 수 있겠죠?

위와 같은 표를 css로 표현할 수 있는데, 이때 grid-template-columns와 grid-template-rows라는 속성을 사용해서 지정할 수 있습니다.

 

 

grid-template-columns: 150px 150px 150px;
	/* grid-template-columns: 1fr 1fr 1fr */
	/* grid-template-columns: repeat(3, 1fr) */
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */

	grid-template-rows: 150px 150px 150px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */

 

위 표에서 사용된 grid-template-columns: 150px 150px 150px는 1개의 컬럼의 넓이를 150px로 설정하겠다는 의미입니다.

fr이라는 옵션은 fraction의 약자이며 숫자 비율대로 트랙의 크기를 나눈다는 의미입니다.

예를 들어 1fr 1fr 1fr은 1:1:1 비율인 3개의 column을 만들겠다는 의미입니다.

만약 column이 150px 1fr 150px로 되어있을 경우엔 1번 컬럼, 3번 컬럼을 제외한 2번컬럼이 width를 꽉 채우게 됩니다.

 

 

 

 

2) repeat 함수

repeat는 반복되는 값을 자동으로 처리할 수 있는 함수입니다. 위 처럼 150px 150px … 이렇게 반복되는 값을 여러 번 사용하면 불편해서 생긴 함수 같습니다.

repeat(반복횟수, 반복값)

 

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

  

즉 1fr을 5번 반복해서 지정한다는 의미입니다.

 

 

 

 

3) minmax 함수

최솟값과 최대값을 지정하는 함수입니다.

minmax(100px, auto)의 의미는 최소한 100px, 최대한 자동으로(auto) 늘어나게라는 의미입니다. 즉, 아무리 내용의 양이 적더라도 최소한의 값은 유지하고, 내용이 많아 100px가 넘어갈 경우 자동으로 늘어나게끔 처리하라는 의미입니다.

 

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

 

 

 

 

 

4) auto-fill과 auto-fit

행/열(track)의 개수를 그리드 컨테이너 및 행과 열의 크기에 맞게 자동으로 조정하는 옵션입니다.

repeat 함수와 같이 사용하며, 행/열과 아이템의 개수가 명확할 필요가 없거나 명확하지 않을 경우에 사용합니다.(반응형 그리드)

 

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

 

위와 같은 옵션으로 grid를 생성하게 되면 auto-fill의 크기를 20%로 설정했기 때문에 총 5개의 column이 같은 비율로 생성이 되는데,

auto-fill의 옵션이 지정되엇기 때문에 컨테이너의 크기가 아이템들을 수용하기에 크기가 충분하지 않은 경우 자동적으로 아이템을 자동적으로 줄바꿈처리하면서 그에 맞게 암시적 행/열도 자동으로 수정합니다.

 

 

auto-fill과 auto-fit은 크기가 충분하지 않을 경우 자동으로 처리한다는 점에서는 같지만, 아래와 같이 auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소한다는 특징이 있습니다.

 

 

 

 

 

5) row-gap, column-gap, gap

그리드 셀 사이의 간격을 설정하는 옵션입니다. 셀과 셀에 사이에 있는 간격을 gap이라고 합니다. 

.container {
	row-gap: 10px;
	/* row의 간격을 10px로 */
	column-gap: 20px;
	/* column의 간격을 20px로 */
}

.container {
	gap: 10px 20px;
	/* row-gap: 10px; column-gap: 20px; */
}

.container {
	gap: 20px;
	/* row-gap: 20px; column-gap: 20px; */
}

위와 같이 직관적으로 gap의 크기를 조절할 수 있습니다.

 

 

 

 

 

 

6) grid-auto-rows, grid-auto-columns

암시적으로 행과 열의 크기를 정의합니다.

grid-template-rows: 100px 100px로 속성을 지정해서 2행에 100px크기의 표를 만들었다고 가정했을 때, 사용자가 4번째, 혹은 5번째 이상의 행에 요소를 넣게 된다면 어떻게 될까요?

이때 명시적(template)로 지정하지 않은 rows의 크기를 암시적(auto)로 지정해서 처리할 수가 있습니다.

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
  grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
  grid-auto-rows: 100px; /* 그 외(암시적) 행의 크기 정의 */
}
.item:nth-child(3) {
  grid-row: 3 / 4;
}

 

 

 

 

 

 

 

 

7) grid를 사용한 예제

코드펜 : https://codepen.io/nykim_/pen/VwLogOz

 

 

 

참고

https://nykim.work/59

https://studiomeal.com/archives/533

https://heropy.blog/2019/08/17/css-grid/