CSS Grid

아래 내용은 학원 수업 및 온라인 강좌 등을 듣고 정리한 내용입니다.

Grid Box

2차원 행과 열의 레이아웃 시스템을 제공한다. (flex와 마찬가지로 container와 item으로 구성된다.)
배치와 정렬의 개념을 가질 수 있다.

Container 설정

값	의미
grid	container를 block 특징을 가진 grid 요소로 만든다.
inline-grid	container를 inline 특징을 가진 grid 요소로 만든다.

열과 행의 설정

1. 명시적으로 열 또는 행의 개수와 크기를 지정

띄어쓰기로 구분하며 원하는 개수만큼 크기를 지정한다.

• grid-template-rows (행)
• grid-template-columns (열)

grid-template-rows : 50px 80px 80px;
grid-template-columns : 150px 300px;

위의 방법은 열이나 행의 개수가 많아지면 불편하다. 아래의 방법은 이 불편함을 줄여줄 수 있다.

grid-template-rows : repeat(3, 1fr);
grid-template-columns : repeat(2, 100px 1fr 200px);

2. 라인의 이름을 지정가능하다.

다만, 각 라인은 행과 열의 개수대로 숫자로 된 이름이 이미 정해져 있기 때문에 라인의 이름을 지정할 필요는 없다.

grid-template-columns : [left] 50px [right] 80px;

또한 1개의 선에 중복된 이름 설정도 가능하다.

grid-template-columns : [left first] 50px [right last] 80px;

3. 특정한 item 그리드 영역의 이름을 만들 수 있다.

grid-template-area :
	"header header header"
	"main main main"
	"footer footer footer";

여기서 row는 ""로 구분하며, columns는 띄어쓰기로 구분한다. 이때 빈 공간은 '.'를 사용하여 표시한다.

4. 단축표기법

grid-template은 grid-template-rows, grid-template-columns, grid-template-arears의 단축표기법이다. (row / columns는 "/"로 구분한다.) 개인적으로는 단축표기법이 더 어려워서 그냥 별도로 쓰는데 가독성이 더 좋지 않을까 생각한다.

row와 columns만 단축표기할 때

grid-template: 50px 80px 80px / 150px 300px;

areas와 rows와 columns를 함께 사용할 때

grid-template:
  "header header header" 80px
  "main main main" 350px
  "footer footer footer" 130px / 2fr 100px 1fr;

5. 암시적 크기 설정

• grid-auto-rows : 암시적 크기 설정
• grid-auto-columns : 암시적 크기 설정
• grid-auto-flow : 배치하지 않은 아이템을 "어떻게" 자동배치할지
• grid : grid-template-xxx와 grid-auto-xxx의 단축속성

etc

• row-gap : row 사이의 간격
• column-gap : column 사이의 간격
• align-content, justify-content, align-items, justify-items : flex와 의미가 대부분 비슷
• space-evenly : 모든 여백을 고르게 정렬

Item 설정

• grid-row-start, grid-row-end, grid-columns-start, grid-columns-end : 그리드 아이템을 배치하기 위해 그리드 선의 "시작"과 "끝"을 지정 (숫자, 선 이름 사용가능)
• align-self, justify-self : 단일 그리드 item을 정렬함

새로운 단위 fr

grid에서는 새로운 단위인 fr을 사용할 수 있다. 이 fr (fraction, 공간 비율) 단위는 비율로 계산된다.

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

위의 코드에서 columns의 총 길이가 600px 일 때 1fr은 600px을 6 (1 + 3 + 2의 합)으로 나눈 값이 된다. 그러므로 1fr은 100px이 되고, 3fr은 300px, 2fr 200px이 되는 것이다.

grid-template-columns : 200px 3fr 2fr;

위 코드 역시 columns는 총 600px이라고 할 때 1fr의 크기를 생각해 보자. 전체의 단위가 통일되어 있지 않기 때문에 좀 더 깊이 생각할 필요가 있다. 일단 첫 번째 columns는 정해진 200px이 될 것이다. 그렇다면 3fr과 2fr은 남은 400px을 나누어 가지게 되므로 3fr은 240px, 2fr은 160px이 되는 것이다.

min-content, max-content

그리드 아이템에 포함하는 내용의 최소, 최대 크기를 의미

그리드를 정리하며

사실 실제로 그리드를 프로젝트에 적용해서 사용해보지는 않았기 때문에 정리를 했다고 해도 머릿속에 잘 남아있지는 않았다. 큰 레이아웃을 정리하기엔 편할 거라는 생각을 해보기는 하지만, 디테일한 부분은 flex 혹은 float등을 사용하는 게 더 간단하지 않을까 싶다.