display : Grid Container를 정의합니다. 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items로 정의됩니다.
display: grid : Block 특성의 Grid Container를 정의
display: inline-grid : Inline 특성의 Grid Container를 정의
grid-template-columns : 명시적 n열의 크기를 정의합니다.
grid-template-rows : 명시적 n 행의 크기를 정의합니다.
열, 행의 크기 뿐만 아니라 라인의 이름도 정의할 수 있습니다.
grid-template-columns: 200px 200px : 2열이며 행의 크기(width)는 200px 이다.
grid-template-rows: 100px 100px : 2행이며 열의 크기(height)는 100px 이다.
fr (fraction, 공간 비율) 단위를 사용할 수 있습니다. (Container 크기 안의 비율)
grid-template-columns: 1fr 1fr 1fr : 3열 크기의 비율을 지정
grid-template-rows: 1fr 1fr : 2행 크기의 비율을 지정
repeat() 함수를 사용할 수 있습니다.
grid-template-columns: repeat(3, 100px) : 3열 크기 100px로 지정
grid-template-rows: repeat(2, 1fr) : 2행 크기 1비율로 지정
grid-template-columns: repeat(2, 100px 200px) : 4열 크기 100px 200px 100px 200px 지정
grid-template-areas : 지정된 그리드 영역 이름( grid-area ) 을 참조해 그리드 템플릿을 생성.
grid-area : Container가 아닌 Items에 적용되는 속성이며, grid-template-areas로 지정한 영역문자를 선언해 주면 해당 영역만큼 item이 배치됩니다.
<div class="container">
<div class="item">HEADER</div>
<div class="item">MAIN</div>
<div class="item">ASIDE</div>
<div class="item">FOOTER</div>
</div>
/*[ A ]*/
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer"
}
.item:nth-child(1) {
grid-area: header
}
.item:nth-child(2) {
grid-area: main
}
.item:nth-child(3) {
grid-area: aside
}
.item:nth-child(4) {
grid-area: footer
}
/*[ B ]*/
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main . aside"
". footer footer"
} /* (.) 점은 빈 칸을 만들어 줍니다. */
[ A ]
[ B ]
grid-row-gap : 각 행과 행 사이의 간격(Gutter)을 지정합니다.
grid-column-gap : 각 열과 열 사이의 간격(Gutter)을 지정합니다.
더 명확하게는 그리드 선의 크기를 지정
grip-gap : 첫 번째는 row-gap을 지정 두 번째는 column-gap을 지정합니다.
하나만 존재한다면 row, column 둘다 지정합니다.
row-gap: 10px
column-gap: 5px
gap: 10px 5px
gap: 10px
grid-auto-columns : 암시적 n 열(가로)의 크기를 정의합니다.
Item이 grid-template-columns 로는 명시적으로 열의 갯수의 크기를 지정하지만, grid-auto-columns의 경우 n열에 상관없이 자동으로 열의 크기를 지정합니다.
grid-auto-rows : 암시적 n 행(세로)의 크기를 정의합니다.
Item이 grid-template-rows 로는 명시적으로 행의 갯수의 크기 지정하지만, grid-auto-rows의 경우 n행에 상관없이 자동으로 행의 크기가 적용됩니다.
grid-auto-rows: 100px
grid-auto-columns: 1fr
⚠️ 암시적 행, 열 크기 적용 시 해당 암시적 칸에서 음수 칸을 이용한 grid-column, grid-row 값 설
정은 불가하다.
*gird-column: 4 / 5 gird-row: 5 / 7 는 가능*
*grid-column: -1 / -2 grid-row: -1 / -3 는 불가능*
명시적인 부분에서만 음수 사용 가능, 암시적인 부분에서 음수 사용 불가능
grid-auto-flow : 배치하지 않은 Item을 어떤 방식의 '자동 배치 알고리즘'으로 처리할지 정의.
(기본 값 : row)
grid-auto-flow: row : 각 행 축을 따라 차례로 배치
grid-auto-flow: column : 각 열 축을 따라 차례로 배치
grid-auto-flow: row dence : 각 행 축을 따라 차례로 배치, 빈 영역 메움! (row 생략 가능)
grid-auto-flow: column dence : 각 열 축을 따라 차례로 배치, 빈 영역 메움!
채워지는 방향이 row(왼쪽에서 오른쪽)방향 으로 채워진다 라고 생각하시면 됩니다.
빈 영역은 채워질 수 있는 것 중에서 먼저 선언된 부분을 가져와 빈 영역을 메움니다.
채워지는 방향이 column(위쪽에서 아래쪽)방향 으로 채워진다 라고 생각하시면 됩니다.
빈 영역은 채워질 수 있는 것 중에서 먼저 선언된 부분을 가져와 빈 영역을 메움니다.
grid-template : grid-template-rows, grid-template-columns, grid-template-areas 의 단축 속성
[방법1]
grid-template: <grid-template-rows> / <grid-template-columns>
grid-template: <grid-template-areas>
[방법2]
grid-template:
"AREAS" 행너비
"AREAS" 행너비
/ <grid-template-columns>
<div class="container">
<div class="item">HEADER</div>
<div class="item">MAIN</div>
<div class="item">ASIDE</div>
<div class="item">FOOTER</div>
</div>
/*[ A ]*/
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer"
}
/*[ B ]*/
.container {
display: grid;
grid-template: repeat(3, 100px) / repeat(3, 1fr);
grid-template:
"header header header"
"main main aside"
"footer footer footer"
}
/*[ C ]*/
.container {
display: grid;
grid-template-areas:
"header header header" 100px
"main main aside" 100px
"footer footer footer" 100px
/ 1fr 1fr 1fr
}
.item:nth-child(1) {
grid-area: header
}
.item:nth-child(2) {
grid-area: main
}
.item:nth-child(3) {
grid-area: aside
}
.item:nth-child(4) {
grid-area: footer
}
grid : grid-template-xxx 과 grid-auto-xxx 의 단축 속성입니다.
grid: <grid-template>
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>
→ 사용 시 "/"룰 기준으로 앞쪽은 rows 속성이 위치하고 뒤쪽은 columns 속성이 위치하며,
template 는 template 끼리, auto 는 auto 끼리 모아서 사용한다.