CSS Grid는 2차원 (행과 열)의 레이아웃 시스템을 제공합니다.
Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 Grid를 사용할 수 있습니다. (Grid의 효율적인 테스트는 파이어폭스 브라우저를 추천)
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 끼리 모아서 사용한다.
align-content : 그리드 콘텐츠를 수직(열 축) 정렬합니다. (기본 값 : normal)
그리드 콘텐츠의 세로 너비가 그리드 컨테이너 보다 작아야 합니다.
align-content: normal
: stretch와 같습니다.
align-content: start
: 시작점(위쪽) 정렬
align-content: center
: 수직 가운데 정렬
align-content: end
: 끝점(아래쪽) 정렬
align-content: space-around
: 각 행 위아래에 여백을 고르게 정렬
align-content: space-between
: 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
align-content: space-evenly
: 모든 여백을 고르게 정렬
align-content: stretch
: 열 축을 채우기 위해 그리드 콘텐츠를 늘림