출처
MDN - CSS grid layout
MDN - Relationship of grid layout to other layout methods
MDN - Basic concepts of grid layout

연습하는데 사용한 웹 사이트(제로초 추천)
GRID GARDEN

1. grid 레이아웃이란?

세로 열과 가로 행을 기준으로 요소를 정렬할 수 있는 레이아웃이다.

2. grid vs flexbox

Flexbox는 한 행, 또는 한 열 방향만 배치할 수 있다. 즉, 일차원의 레이아웃이다. 하지만 grid의 경우 행과 열 모두 고려한 2차원적 레이아웃을 구성할 수 있다.

3. grid 개념들

이번에야말로 CSS grid를 익혀보자

3-1. 그리드 컨테이너

display: grid를 선언한 요소를 말한다. 해당 요소 직계 자손 요소들은 grid item이 된다.

3-2. 그리드 트랙

그리드에 그려진 두 라인 사이의 공간을 나타낸다. 그리드의 행이나 열을 나타낸다.

4. grid 관련 프로퍼티

4-1. grid-template-rows, grid-template-columns

컨테이너에서 grid 트랙의 크기들을 지정해준다.

grid 컨테이너에서 배치하고 싶은 item의 개수만큼 값을 입력해준다. 예를 들어서 너비가 60px인 아이템을 4개 배치하고 싶으면 아래와 같이 입력한다.

grid-template-columns: 60px 60px 60px 60px

마찬가지로 높이가 60px인 아이템을 4개 배치하고 싶으면 아래와 같이 입력한다.

grid-template-rows: 60px 60px 60px 60px;

단위는 px 말고도 fr을 사용할 수 있다. fr 비율 크기만큼 공간을 차지한다는 의미이다.

만약에 1/3 너비를 갖는 아이템을 3개 배치하고 싶을 때는 아래와 같이 입력한다.

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

고정 크기를 px로, 가변 크기를 fr로 섞어 쓸 수도 있다.

grid-template-columns: 50px 3fr 1fr;

첫 번째 column은 50px을 갖고, 두 번째, 세 번째는 각각 3:1 비율로 남은 너비를 나눠 갖는다.

4-2. grid-column-start, grid-column-end

grid-item에 적용하는 속성이고, 해당 아이템을 몇 번째 행/열에 위치할지 정할 때 사용한다.

grid-column-start의 경우 왼쪽에서 3번째 column에 아이템을 배치하려면 아래와 같이 작성한다.

grid-column-start: 3;

다수의 아이템을 배치할 경우에는 grid-column-end을 사용한다.

grid container의 왼쪽 테두리를 첫번째 column, 오른쪽 테두리를 마지막 column으로 하여 배치할 아이템을 결정한다.

첫번째 column부터 3번째 column까지 grid-item을 배치하려면 다음과 같이 입력해준다.

grid-column-start: 1;
grid-column-end: 4;

5번째 column 열부터 2번째 column 열까지 아이템을 배치하려면 아래와 같이 작성한다.

grid-column-start: 5;
grid-column-end: 2;