display: grid;
grid-template-rows: 가로 그리드를 몇개, 어느 크기로 만들지.
grid-template-columns: 세로 그리드를 몇개, 어느 크기로 만들지.
repeat함수는 위의 두 태그에만 사용이 가능함.
repeat(10, 40px); -> 40px크기의 그리드를 10개 만들어라
fr : fraction
grid-container: 500px;
grid-template-rows: 1fr 3fr 1fr;
-> 가로 그리드를 1:3:1비율로 나눠라 -> 100px 300px 100px이 된다.
grid-template-areas: 그리드 이름 할당
"hd hd hd"
"nav sec ad"
"ft ft ft"
모양이 직사각형이 되지 않으면 레이아웃이 무너지니 주의!
그리드를 비우고 싶다면 . 또는 none를 사용한다.
". ft none"
grid-template: grid-template들의 단축 프로퍼티, 아래 두개는 같은 코드이다.
.main {
display: grid;
grid-template:
"hd hd hd" 128px
"nav content ad" auto
"ft ft ft" 240px
/ 1fr 3fr 1fr;
}.main {
display: grid;
grid-template-rows: 128px auto 240px;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"hd hd hd"
"nav content ad"
"ft ft ft";
}rows와 columns도 한번에 작성할 수 있다 아래 두개도 같은 코드이다.
.main {
display: grid;
grid-template: 128px auto 240px / 1fr 3fr 1fr
}.main {
display: grid;
grid-template: 128px auto 240px / 1fr 3fr 1fr
}grid-rows-gap: 가로 그리드 간격을 조절
grid-columns-gap: 세로 그리드 간격을 조절
grid-gap으로 단축 프로퍼티 작성이 가능하다.
grid-row-gap: 16px;
grid-column-gap: 16px;
/* 위와 아래의 코드는 동일합니다. */
grid-gap: 16px 16px;
/* 모두 동일한 코드입니다. */
grid-gap: 16px;grid-auto-rows: 크기가 지정되지 않은 가로 그리드 트랙의 크기를 지정할 수 있음
grid-auto-columns: 크기가 지정되지 않은 세로 그리드 트랙의 크기를 지정할 수 있음
minmax(최소값, 최대값): 카드 크기를 자동으로 늘린다.
grid-auto-flow: grid가 자동으로 배치되는 방향 결정, row(기본값)
row, column, row dense, column dense(dense 해당 방향 그리드 빈칸을 채움)
grid는 grid-template와 grid-auto의 단축 프로퍼티다.
grid: <grid-template>;
grid: <grid-template-rows> / auto-flow <grid-auto-columns>;
grid: auto-flow <grid-auto-rows> / <grid-template-columns>;grid정렬
align : 수직방향 정렬
justify : 수평방향 정렬
place : align과 justify 축약형
content : grid-container기준으로 grid-cell을 정렬
item : grid-cell, grid-area기준으로 grid-cell을 정렬
align-content:
justify-content:
place-content:
align-items:
justify-items:
place-items:
