Grid
:grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전 지식이 덜 필요하다.
1차원적인 flex 방식과 다르게 2차원적인 grid는 컨테이너의 반응 방향(가로, 세로)을 각각 지정할 수 있어 더 다양한 배치와 정렬이 가능하다.
또한 미리 정의된 레이아웃 grid에 자식 요소를 배치할 수 있어서 유연하게 레이아웃을 정의할 수 있다.
display: grid;grid로 레이아웃을 정의할 때 사용하는 구문.
grid 속성을 주면 자식 요소들은 block 속성을 가지게 된다.
lnline-grid 속성을 주면 inline 속성이 된다.
grid-template-rows
:행을 추가하고, 구분된 행(세로/heghit)의 크기를 정의한다.
라인(Line)의 이름도 정의할 수 있다.
그러나 각 라인은 갯수대로 숫자(양수 or 음수)라인 이름이 자동으로 지정되어 있다.
그렇기 때문에 굳이 라인 이름을 정의할 필요는 없다.
그리드에서는 트랙이라고도 부름.
함수를 사용할 수 있다.
grid-template-rows: 100px 200px 480px;
grid-template-colums
:열을 추가하고, 구분된 열(가로/너비/width)의 크기를 정의한다.
grid-template-rows와 같이 라인의 이름도 정의할 수 있으며, 함수를 사용할 수 있다.
grid-template-columns: 600px 600px;
grid-template-areas
:지정된 그리드 영역 이름을 참조해 그리드 템플릿을 생성하고 각 컨테이너의 위치를 정의한다.
그리드 영역 이름은 grid item 즉, body 영역에 있는 요소들에게 주어야 하는 속성이다.
열과 행을 따라 그리드 영역을 지정해주어야 한다.
위와 같은 grid 레이아웃을 만드려면 aside는 하나만 들어가지 않고, 3번 들어간다.
article이 3개 있기 때문에 aside 영역도 하나만 주지 않고 3번 전부 주어야 한다.
ex)
grid-template-areas:
"header header"
"nav nav"
"aside article1"
"aside article2"
"aside article3"
"footer footer"
;
grid-row-gap
:각 열과 열 사이의 간격을 지정하는 속성.
그리드 선의 크기를 지정한다고 표현할 수도 있다.
grid-row-gap : 16px;
grid-column-gap
:각 행과 행 사이의 간격을 지정하는 속성.
grid-column-gap: 16px;
grid-gap
:각 행과 행 사이, 열과 열 사이의 간격을 한꺼번에 지정하는 속성.
grid 라인의 두께를 지정해주는 것이라고 생각해도 된다.
이 속성은 컨테이너에게 지정한다.
grid-gap: 16px 16px;
grid-auto-rows
:암시적인 열 크기를 정의하는 속성.
grid-template-rows를 지정하지 않은 요소들의 열의 크기를 암시적으로 정의한다.
grid-auto-rows: 100px;
grid-auto-columns
:암시적인 행 크기를 정의하는 속성.
grid-template-columns를 지정하지 않은 요소들의 열의 크기를 암시적으로 정의한다.
grid-auto-columns: 100px;
grid-auto-flow
:배치되지 않은 요소를 어떤 방식으로 자동 배치할 지 정의하는 속성.
| 속성값 | 설명 |
| row | 각 열 축을 따라 차례로 배치 |
| column | 각 행 축을 따라 차례로 배치 |
| row dense | 각 열 축을 따라 차례로 배치하여 빈 영역을 메우는 것 |
| column dense | 각 행 축을 따라 차례로 배치하여 빈 영역을 메우는 것 |
grid-auto-flow: row / row dense / dense;
grid-row(or column)-start
:grid 요소들을 배치하기 위해 grid 영역이 시작할 가장자리를 지정하여 위치를 지정하는 속성.
숫자로 지정하거나, 선 이름으로 지정하거나 span 키워드를 통해 지정한다.
grid-row-start: 1;
grid-row(columns)-end
:grid 요소들을 배치하기 위해 grid 영역이 끝날 위치를 지정하는 속성.
grid-row-end: 3;