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

CSS Grid

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

container

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

열과 행의 설정

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

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

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

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

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

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

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

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

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

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

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

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

ex1. 
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의 단축표기법이다. (rows / columns 는 "/"로 구분한다.)
개인적으로는 단축표기법이 더 어려워서 그냥 별도로 쓰는데 가독성이 더 좋지 않을까 생각한다.

ex1. rows와 columns만 단축표기할 때
grid-template: 50px 80px 80px / 150px 300px;

ex2. 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 : 모든 여백을 고르게 정렬

content와 item의 차이점 확인하기!

item

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

단위

fr

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

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

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

또 다른 예제를 보자

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

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

min-content, max-content

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

그리드를 정리하며..

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