[CSS] Grid Layout Module

Making Layouts - CSS Grid

Grid Layout

격자 형태를 기반으로 하는 레이아웃 시스템. IE를 제외한 거의 모든 브라우저(크롬, 엣지, 파폭, 사파리, 오페라 등)에서 지원한다.

---

Grid Columns

grid 상에서 세로줄.

즉 1-4-7이 1st column, 2-5-8이 2nd column, 3-6-9가 3rd column이다.

Grid Rows

grid 상에서 가로줄.

즉 1-2-3이 1st row, 4-5-6이 2nd row, 7-8-9가 3rd row다.

---

Grid Gaps

column 간격이 grid-column-gap, row 간격이 grid-colum-gap이다(margin, padding과 비슷).

grid-column-gap

각 column의 간격(가로 여백)

grid-row-gap

각 row의 간격(세로 여백)

grid-gap

grid-column-gap: 10px; grid-row-gap: 10px;을 grid-gap: 10px;로 축약할 수 있다.

---

Grid Lines

column 사이의 선들은 column lines, row 사이의 선들은 row lines.

이런 모양의 grid를 만들어보자.

 

직사각형 4개처럼 보이지만 사실은 4X4 형태다.

line마다 이름을 지정해

이런 식으로 범위를 지정할 수도 있다.

---

grid-column-start

특정 영역의 시작점이 되는 column의 번호

4칸짜리 연두색 영역을 만든다고 할 때,

연두색이 첫 번째 column부터 시작하니까 grid-column-start: 1;

grid-column-end

특정 영역의 끝점이 되는 column의 번호

연두색이 다섯 번째 column에서 끝나니까 grid-column-end: 5;다.

네 칸짜리 주황색 영역도 마찬가지다.

연두색과 마찬가지로 grid-column-start: 1; grid-column-end: 5;가 된다.

grid-row-start

특정 영역의 시작점이 되는 row의 번호

하늘색은 grid-column-start: 1; grid-column-end: 4;

연두색, 주황색과 다르게 row 두 개를 차지한다.

두 번째 row에서 시작하므로 grid-row-start는 2가 된다.

grid-row-end

특정 영역의 끝점이 되는 row의 번호

하늘색은 네 번째 row에서 끝나므로 grid-row-end: 2;가 된다.

보라색도

row가 두 개다.

2번 row에서 시작, 4번 row에서 끝. grid-row-start: 2; grid-row-end: 4;

이렇게 적용하면 된다.

---

참고

CSS Grid Layout