CSS 페이지 레이아웃 속성은 사용자가 원하는 대로 요소들을 배치하기 위해 사용하며, Display, Flexbox, Grid, Floats, Positioning, Table Layout, Multistage Layout 등이 있다. 속성마다 장단점이 있어서 각 속성을 정확히 파악하고 사용해야 한다. Grid Layout 컨테이너 속성에 대한 정보를 기록하고자 CSS 페이지 레이아웃 5부를 작성했다.
주의사항 1. 모든 예시는 크롬 브라우저 기준이다. 2. 그리드 레이아웃은 플렉스 레이아웃보다 훨씬 더 복잡하기 때문에 가장 기본적인 예시만 다룬다. 3. 그리드 레이아웃을 설명할 때 아랍어 방향은 고려하지 않는다. 4. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.
목차
- Display Flex
6-1. Display Flex – flexbox 속성
6-2. Display Flex – flexbox 정렬 속성 요약
6-3. Display Flex – flexbox 정렬 속성
- Display Grid
7-1. Display Grid – grid layout 셀 속성
7-2. Display Grid – grid layout 컨테이너 속성
7-3. Display Grid – grid layout 정렬 속성 요약
7-4. Display Grid – grid layout 정렬 속성
- Multi-column Layout
- Media Query
- Legacy Layout Methods
Grid Layout 그리드 컨테이너 속성
○ grid
1. 정의
그리드 컨테이너 내 명시적인 그리드 속성과 암시적인 그리드 속성을 설정한다. grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow 속성의 단축 구문이다.
2. 코드 사용
grid: <grid-template>;
grid: <grid-template-rows> / <auto-flow && dense>;
grid: <grid-template-rows> / <auto-flow && dense> <grid-auto-columns>;
grid: <auto-flow && dense> <grid-auto-rows> / <grid-template-columns>;
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
4. 속성
(1) 기본값
지정하지 않은 그리드 속성은 기본값으로 재설정된다.
grid-template-rows: none;
grid-template-columns: none;
grid-template-areas: none;
grid-auto-rows: auto;
grid-auto-columns: auto;
grid-auto-flow: row;
grid-column-gap: 0;
grid-row-gap: 0;
column-gap: normal;
row-gap: normal;
(2) grid: <grid-template>
grid-template-rows, grid-template-columns, grid-template-areas 속성이 설정된다.
(3) grid: <grid-template-rows> / <auto-flow && dense> <grid-auto-columns>
grid-template-rows 속성으로 그리드 컨테이너 내 행 방향으로 나열되는 명시적인 그리드 트랙이 생성되고, grid-auto-flow: column의 약어가 적용된 후 그리드 컨테이너 내 열 방향으로 나열되는 암시적인 그리드 트랙이 생성된다. grid-auto-flow: column의 약어가 작성된 만큼 각 열의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 열이 추가된다. 그리고 다른 모든 그리드 속성은 기본값으로 재설정된다.
(4) grid: <auto-flow && dense> <grid-auto-rows> / <grid-template-columns>
grid-auto-flow: row의 약어가 적용된 후 그리드 컨테이너 내 행 방향으로 나열되는 암시적인 그리드 트랙이 생성되고, grid-template-columns 속성으로 그리드 컨테이너 내 열 방향으로 나열되는 명시적인 그리드 트랙이 생성된다. grid-auto-flow: row의 약어가 작성된 만큼 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가된다. 그리고 다른 모든 그리드 속성은 기본값으로 재설정된다.
5. 코드 예시
(1) grid: <grid-template>
<style>
.gridContainer.gridedBoxNumber1 {
grid:
"hd hd hd" 25%
". mn mn" 25%
"fr fr fr" 25% / 10% 20% 30%;
}
</style>
<div class="codeExampleBg">
<div class="gridContainer gridAutoRowsBox gridedBoxNumber1">
<div>aa</div>
<div>bbb</div>
<div>ccccc</div>
<div>ddd</div>
<div>eeee</div>
<div>ff</div>
<div>ggg</div>
<div>hhhh</div>
</div>
</div>
grid-template 속성값만 작성되었으므로 grid-template 속성과 같이 작동한다. grid-template-areas 속성값으로 3행 3열의 영역이 구분되고, grid-template-rows 속성값으로 그리드 컨테이너 내 행 방향으로 나열되는 그리드 트랙의 높이 값이 25%로 설정되고, grid-template-columns 속성값으로 그리드 컨테이너 내 열 방향으로 나열되는 그리드 트랙의 너빗값이 첫 번째 열부터 세 번째 열까지 순서대로 10%, 20%, 30%로 설정된다. 그리드 컨테이너의 높이 값 150px 중 행 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 높이 값은 75%이고, 그리드 컨테이너 너빗값 220px 중 열 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 너빗값은 60%이다. 그리드 항목은 여섯 개이고 grid-auto-flow: row에 따라 배치된다.
(2) grid: <grid-template-rows> / <auto-flow && dense> <grid-auto-columns>
<style>
.gridContainer.gridedBoxNumber2 {
grid: repeat(3, 1fr) / auto-flow 20px 30px 40px;
}
</style>
<div class="codeExampleBg">
<div class="gridContainer gridAutoRowsBox gridedBoxNumber2">
<div>aa</div>
<div>bbb</div>
<div>ccccc</div>
<div>ddd</div>
<div>eeee</div>
<div>ff</div>
<div>ggg</div>
<div>hhhh</div>
</div>
</div>
grid-template-rows 속성값으로 repeat(3, 1fr)이 적용되어 같은 높이 값 비율을 가진 3행이 생성되고, grid-auto-flow: columns의 약어가 적용되어 그리드 항목이 각 열의 순서대로 배치되고, grid-auto-columns 속성값으로 20px 30px 40px가 적용되어 열 방향으로 암시적인 그리드 트랙이 생성될 때 1열의 너빗값은 20px, 2열의 너빗값은 30px, 3열의 너빗값은 40px이 된다.
(3) grid: <auto-flow && dense> <grid-auto-rows> / <grid-template-columns>
<style>
.gridContainer.gridedBoxNumber3 {
grid: auto-flow 20px 30px 40px / repeat(3, 1fr);
}
</style>
<div class="codeExampleBg">
<div class="gridContainer gridAutoRowsBox gridedBoxNumber3">
<div>aa</div>
<div>bbb</div>
<div>ccccc</div>
<div>ddd</div>
<div>eeee</div>
<div>ff</div>
<div>ggg</div>
<div>hhhh</div>
</div>
</div>
grid-auto-rows의 약어가 적용되어 그리드 항목이 각 행의 순서대로 배치되고, grid-auto-rows 속성값으로 20px, 30px, 40px가 적용되어 행 방향으로 암시적인 그리드 트랙이 생성될 때 1행의 높이 값은 20px, 2행의 높이 값은 30px, 3행의 높이 값은 40px이 되고, grid-template-columns 속성값으로 repeat(3, 1fr)이 적용되어 같은 넙니값 비율을 가진 3열이 생성된다.
○ grid-template
1. 정의
그리드 컨테이너 내 명시적인 그리드 영역과 각 그리드 셀의 이름을 설정하고, 각 행과 열 방향으로 나열되는 그리드 트랙의 크기를 설정한다. grid-template-rows, grid-template-columns, grid-template-areas 속성의 단축 구문이다.
2. 코드 사용
grid-template: <grid-template-rows> / <grid-template-columns>;
grid-template: <grid-template-areas> <grid-template-rows> / <grid-template-columns>;
grid-template:
"a a a" <grid-template-rows>
"b b b" <grid-template-rows>
"c c c" <grid-template-rows> / <grid-template-columns>;
grid-template:
<rows-line-name> "a a a" <grid-template-rows> <rows-line-name>
<rows-line-name> "b b b" <grid-template-rows> <rows-line-name>
<rows-line-name> "c c c" <grid-template-rows> <rows-line-name> / <columns-line-name> <grid-template-columns> <columns-line-name>;
– grid-template 속성으로 그리드 셀 이름과 그리드 라인 이름을 설정하고, grid-area 속성으로 그리드 컨테이너에 설정된 그리드 셀 이름이나 그리드 라인 이름을 입력해서 그리드 영역을 설정한다. grid-template 속성은 그리드 컨테이너 속성이고, grid-area 속성은 그리드 셀 속성이다.
– 그리드 컨테이너 내 열 방향으로 나열되는 명시적인 그리드 트랙의 크기는 grid-template-areas 속성값 중 마지막 행에 작성해야 정상적으로 작동한다. 작성 규칙은 <grid-template-areas> <grid-template-rows> / <grid-template-columns>이다.
– grid-template-areas 속성값 좌우로 작성하는 그리드 라인 이름은 그리드 컨테이너 내 행 방향으로 나열되는 그리드 라인 이름이고, grid-template-columns 속성값 좌우로 작성하는 그리드 라인 이름은 그리드 컨테이너 내 열 방향으로 나열되는 그리드 라인 이름이다.
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
4. 속성
(1) grid-template: none
grid-template-rows, grid-template-columns, grid-template-areas 속성값이 모두 none으로 설정된다. 명시적인 그리드 트랙이 생성되지 않으므로 모든 행과 열은 암시적인 그리드 트랙으로 생성되고, 암시적인 그리드 트랙의 크기는 grid-auto-rows, grid-auto-columns 속성으로 결정된다.
(2) grid-template: <grid-template-rows> / <grid-template-columns>
grid-template-rows, grid-template-columns 속성값이 설정되고, 생략된 grid-template-areas 속성은 none으로 설정된다. 그리드 컨테이너 내 행과 열 방향으로 명시적인 그리드 트랙이 생성된다.
(3) grid-template: <grid-template-areas> <grid-template-rows> / <grid-template-columns>
그리드 컨테이너 내 그리드 영역과 그리드 셀의 이름이 설정되고, 행과 열 방향으로 명시적인 그리드 트랙이 생성된다. grid-template-columns 속성은 grid-template-areas 속성으로 작성된 마지막 행에 <grid-template-areas> <grid-template-rows> / <grid-template-columns> 규칙에 맞춰서 작성해야 한다.
5. 코드 예시
(1) 기본 형태
<style>
.gridTemNumber1 {
grid-template:
"hd hd hd" 25%
". mn mn" 25%
"fr fr fr" 25% / 10% 20% 30%;
}
.gridContainer.gridTemNumber1 .hdexample {
background-color: lime;
grid-area: hd;
}
</style>
<div class="codeExampleBg">
<div class="gridContainer gridTemNumber1">
<div class="hdexample">aa</div>
<div>bbb</div>
<div>ccccc</div>
<div>ddd</div>
<div>eeee</div>
<div>ff</div>
</div>
</div>
grid-template-areas 속성값으로 3행 3열의 영역이 구분되고, grid-template-rows 속성값으로 그리드 컨테이너 내 행 방향으로 나열되는 그리드 트랙의 높이 값이 25%로 설정되고, grid-template-columns 속성값으로 그리드 컨테이너 내 열 방향으로 나열되는 그리드 트랙의 너빗값이 첫 번째 열부터 세 번째 열까지 순서대로 10%, 20%, 30%로 설정된다. 그리드 컨테이너의 높이 값 150px 중 행 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 높이 값은 75%이고, 그리드 컨테이너 너빗값 100% 중 열 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 너빗값은 60%이다. 그리드 항목은 여섯 개이고 grid-auto-flow: row에 따라 배치된다. 그리고 첫 번째 그리드 항목은 grid-area 속성이 적용되어 그리드 셀 이름이 hd인 그리드 영역을 차지하고, HTML 작성 순서상 첫 번째 그리드 항목 뒤에 위치하는 그리드 항목들은 자동으로 뒤로 밀려난다.
(2) 그리드 라인 이름으로 그리드 영역 지정하기
<style>
.gridTemNumber2 {
grid-template:
[header-top] "hd hd hd" 25% [header-bottom]
[main-top] ". mn mn" 25% [main-bottom]
[footer-top] "fr fr fr" 25% [footer-bottom] / [line-1st-st] 10% [line-1st-en line-2nd-st] 20% [line-2nd-en line-3rd-st] 30% [line-3rd-en];
}
.gridContainer.gridTemNumber2 .hdexample {
background-color: lime;
grid-area: header-top / line-2nd-st / 2 / 2;
}
.gridContainer.gridTemNumber2 .mnexample {
background-color: yellow;
grid-area: main-top / 1 / 2 / 2;
}
.gridContainer.gridTemNumber2 .frexample {
background-color: red;
grid-area: footer-top / 2;
}
</style>
<div class="codeExampleBg">
<div class="gridContainer gridTemNumber2">
<div class="hdexample">헤드</div>
<div class="mnexample">메인</div>
<div class="frexample">푸터</div>
</div>
</div>
grid-template-areas 속성값으로 3행 3열의 영역이 구분되고, grid-template-rows 속성값으로 그리드 컨테이너 내 행 방향으로 나열되는 그리드 트랙의 높이 값이 25%로 설정되고, grid-template-columns 속성값으로 그리드 컨테이너 내 열 방향으로 나열되는 그리드 트랙의 너빗값이 첫 번째 열부터 세 번째 열까지 순서대로 10%, 20%, 30%로 설정된다. 그리드 컨테이너의 높이 값 150px 중 행 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 높이 값은 75%이고, 그리드 컨테이너 너빗값 100% 중 열 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 너빗값은 60%이다. 그리드 항목은 세 개이고 grid-area 속성이 적용되어 그리드 라인 이름을 기반으로 그리드 영역이 설정된다.
(3) 그리드 셀 이름으로 그리드 영역 지정하기
<style>
.gridTemNumber3 {
grid-template:
"hd hd hd" 25%
"nv mn mn" 25%
"fr fr fr" 25% / 10% 20% 30%;
}
.gridContainer.gridTemNumber3 .hdexample {
background-color: lime;
grid-area: hd;
}
.gridContainer.gridTemNumber3 .nvexample {
background-color: lightblue;
grid-area: nv;
}
.gridContainer.gridTemNumber3 .mnexample {
background-color: yellow;
grid-area: mn;
}
.gridContainer.gridTemNumber3 .frexample {
background-color: red;
grid-area: fr;
}
</style>
<div class="codeExampleBg">
<div class="gridContainer gridTemNumber3">
<div class="hdexample">헤드</div>
<div class="nvexample">네비</div>
<div class="mnexample">메인</div>
<div class="frexample">푸터</div>
</div>
</div>
grid-template-areas 속성값으로 3행 3열의 영역이 구분되고, grid-template-rows 속성값으로 그리드 컨테이너 내 행 방향으로 나열되는 그리드 트랙의 높이 값이 25%로 설정되고, grid-template-columns 속성값으로 그리드 컨테이너 내 열 방향으로 나열되는 그리드 트랙의 너빗값이 첫 번째 열부터 세 번째 열까지 순서대로 10%, 20%, 30%로 설정된다. 그리드 컨테이너의 높이 값 150px 중 행 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 높이 값은 75%이고, 그리드 컨테이너 너빗값 100% 중 열 방향으로 나열되는 명시적인 그리드 트랙이 차지하는 너빗값은 60%이다. 그리드 항목은 네 개이고 grid-area 속성이 적용되어 그리드 셀 이름을 기반으로 그리드 영역이 설정된다.
○ grid-template-rows
1. 정의
그리드 컨테이너 내 행 방향으로 나열되는 그리드 라인의 이름과 그리드 트랙의 크기를 설정한다.
2. 코드 사용
grid-template-rows: none;
grid-template-rows: auto;
grid-template-rows: <length> | <percentage> | <flex> => A
grid-template-rows: <line-name> A;
grid-template-rows: minmax(A, A);
grid-template-rows: fit-content(<length> | <percentage>);
grid-template-rows: repeat(<positive-integer> | auto-fill | auto-fit, <track-list>);
grid-template-rows: A repeat(auto-fill | auto-fit, A) A;
grid-template-rows: minmax(A, max-content) repeat(auto-fill | auto-fit, A) A;
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
– css transition을 사용한 애니메이션 효과는 파이어폭스를 제외한 브라우저에서 지원하지 않는다.
– subgrid 값은 파이어폭스를 제외한 브라우저에서 지원하지 않는다.
4. 코드 예시
※ 그리드 컨테이너 속성 width: 100%; height: 150px; grid-template-columns: [col1-st] 1fr [col1-en col2-st] 1fr [col2-en col3-st] 1fr [col3-en]; ※ 그리드 레이아웃은 3열이고, 그리드 항목은 6개이다.
(1) grid-template-rows: none
기본값이다. 그리드 컨테이너 내에서 행 방향으로 명시적인 그리드 트랙이 생성되지 않고, 필요한 경우 암시적인 그리드 트랙이 생성된다. 암시적인 그리드 트랙의 크기는 grid-auto-rows 속성으로 결정된다.
(2) grid-template-rows: auto
그리드 항목이 새로운 행으로 나열되는 만큼 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 생성된다. 각 행의 높이 값은 그리드 컨테이너의 높이 값을 행의 개수로 나눈 값인데, 각 행의 최소 높이 값은 그리드 항목 내 콘텐츠의 높이 값이 된다. 예를 들어 그리드 컨테이너의 높이 값이 각 행의 높이 값의 총합보다 작을 경우 각 행의 높이 값은 그리드 항목 내 콘텐츠의 높이 값이 되고 그리드 컨테이너 내 행 방향으로 나열된 그리드 트랙이 그리드 컨테이너를 넘친다.
(3) grid-template-rows: 100px 20%
두 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 행의 높이 값은 100px이고 두 번째 행의 높이 값은 20%로 그리드 컨테이너의 높이 값 150px의 20%인 30px이 된다.
(4) grid-template-rows: 100px 50%
두 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 행의 높이 값은 100px이고 두 번째 행의 높이 값은 50%로 그리드 컨테이너의 높이 값인 150px의 50%인 75px이 된다. 2행의 높이 값의 합이 175px로 그리드 컨테이너 높이 값인 150px를 초과하므로 행 방향으로 나열된 그리드 트랙이 그리드 컨테이너를 넘친다.
(5) grid-template-rows: 100px 1fr 1fr 1fr 1fr
다섯 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 다섯 개가 생성된다. 첫 번째 행의 높이 값은 100px이고 나머지 각 행의 높이 값은 1fr인데, 그리드 항목이 위치하는 두 번째 행은 그리드 항목 내 콘텐츠 크기에 따라 높이 값이 결정되고, 그리드 항목이 없는 세 번째 행, 네 번째 행, 다섯 번째 행은 남는 공간을 나누어 가진다.
(6) grid-template-rows: [row1-li] 1fr [row2-li-st] 1fr [row2-li-en row3-li] 1fr [row4-li]
세 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 행의 높이 값은 1fr로 그리드 컨테이너의 높이 값 150px을 각 50px 씩 나누어 가진다. 그리고 그리드 라인에 이름을 지정할 수 있고, [row2-li-en row3-li]처럼 한 그리드 라인에 여러 개의 이름을 지정할 수도 있다.
(7) grid-template-rows: minmax(100px, 1fr)
한 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 한 개가 생성된다. 첫 번째 행의 높이 값은 minmax(100px, 1fr)로 최소 100px 이상이고 최대 1fr을 초과할 수 없는데, 그리드 컨테이너 내 암시적인 그리드 트랙 1행이 추가로 생성되어 있어서 그리드 컨테이너의 높이 값 150px에서 암시적인 그리드 트랙의 높이 값인 28px을 제외한 128px이 된다.
(8) grid-template-rows: 50px fit-content(80px)
fit-content 함수는 minmax(auto, max-content)와 유사하게 작동한다. 두 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 행의 높이 값은 50px이고 두 번째 행의 높이 값은 그리드 항목 내 콘텐츠의 높이 값을 따르지만 최대 높이 값은 80px이하가 된다. 다만 두 번째 행 내 콘텐츠 내용이 줄 바꿈되어 최대 높이 값인 80px를 초과하면 두 번째 행의 높이 값이 콘텐츠의 높이 값으로 변경되므로 사실상 grid-template-rows 속성에서 fit-content의 인수는 무의하다.
(9) grid-template-rows: repeat(3, 15%)
세 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 행의 높이 값은 15%로 그리드 컨테이너의 높이 값 150px에서 15%인 22.5px이 된다. 그리드 항목 내 콘텐츠의 높이 값이 28px인데 그리드 컨테이너 내 행 방향으로 나열된 그리드 트랙의 높이 값이 22.5px로 더 작기 때문에 콘텐츠가 그리드 트랙을 넘친다.
(10) grid-template-rows: 50px repeat(auto-fill, 30px)
auto-fill 함수가 적용되면 grid-template-rows 속성 내에서 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너의 높이 값이 150px이고 첫 번째 행의 높이 값이 50px이므로 두 번째 행부터는 100px을 30px로 나눈 개수만큼 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 생성된다. 결과적으로 첫 번째 행의 높이 값은 50px, 두 번째 행의 높이 값은 30px, 세 번째 행의 높이 값은 30px, 네 번째행의 높이 값은 30px가 되고 10px의 공간이 남는다.
(11) grid-template-rows: repeat(auto-fill, minmax(30px, 1fr))
auto-fill 함수가 적용되면 grid-template-rows 속성 내에서 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너 내 행 방향으로 최소 높이 값이 32px이고 최대 높이 값이 1fr인 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너의 높이 값이 150px일 때 최소 높이가 32px인 그리드 트랙은 네 개까지 생성될 수 있고 최대 높이가 1fr 이하여야 하므로 그리드 컨테이너의 높이 값을 사 등분 해서 높이 값이 37.5px인 그리드 트랙 네 개가 생성된다.
(12) grid-template-rows: 50px repeat(auto-fit, 30px)
auto-fit 함수가 적용되면 grid-template-rows 속성 내에서 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성되는데, 그리드 항목이 없는 빈 행의 높이 값이 축소된다. 그리드 컨테이너의 높이 값이 150px이고 첫 번째 행의 높이 값이 50px이므로 두 번째 행부터는 100px을 30px로 나눈 개수만큼 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙을 생성하는데, 세 번째 행과 네 번째 행은 그리드 항목이 없는 빈 행이기 때문에 높이 값이 축소된다.
(13) grid-template-rows: repeat(auto-fit, minmax(30px, 1fr))
auto-fit 함수가 적용되면 grid-template-rows 속성 내에서 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성되는데, 그리드 항목이 없는 빈 행의 높이 값이 축소된다. 그리드 컨테이너 내 행 방향으로 최소 높이 값이 32px이고 최대 높이 값이 1fr인 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너의 높이 값이 150px일 때 최소 높이 값이 32px이고 최대 높이 값이 1fr 이하인 그리드 트랙이 생성될 수 있으므로 총 네 개의 그리드 트랙이 생성되고, 그리드 트랙의 높이 값은 그리드 컨테이너의 높이 값을 사 등분 한 37.5px이 된다. 세 번째 행과 네 번째 행은 그리드 항목이 없는 빈 행이므로 높이 값이 축소된다.
○ grid-template-columns
1. 정의
그리드 컨테이너 내 열 방향으로 나열되는 그리드 라인의 이름과 그리드 트랙의 크기를 설정한다.
2. 코드 사용
grid-template-columns: none;
grid-template-columns: auto;
grid-template-columns: <length> | <percentage> | <flex> => A
grid-template-columns: <line-name> A;
grid-template-columns: minmax(A, A);
grid-template-columns: fit-content(<length> | <percentage>);
grid-template-columns: repeat(<positive-integer> | auto-fill | auto-fit, <track-list>);
grid-template-columns: A repeat(auto-fill | auto-fit, A) A;
grid-template-columns: minmax(A, max-content) repeat(auto-fill | auto-fit, A) A;
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
– css transition을 사용한 애니메이션 효과는 파이어폭스를 제외한 브라우저에서 지원하지 않는다.
– subgrid 값은 파이어폭스를 제외한 브라우저에서 지원하지 않는다.
4. 코드 예시
※ 그리드 컨테이너 속성 width: 100%; height:150px; grid-template-rows: [row1-li] 1fr [row2-li] 1fr [row3-li] 1fr [row4-li]; ※ 그리드 레이아웃은 3행이고, 그리드 항목은 6개이다.
(1) grid-template-columns: none
기본값이다. 그리드 컨테이너 내에서 열 방향으로 명시적인 그리드 트랙이 생성되지 않는다. 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙 세 개가 생성되지만, 그리드 항목 6개가 나열되므로 행 방향으로 암시적인 그리드 트랙 세 개가 추가로 생성되고 각 그리드 트랙의 높이 값의 총합이 그리드 컨테이너의 높이 값을 초과하므로 그리드 트랙의 높이 값이 그리드 트랙 내 콘텐츠의 높이 값으로 최소화된다. 그리고 각 그리드 트랙 내 콘텐츠의 높이 값이 총합이 그리드 컨테이너의 높이 값을 초과할 경우 그리드 트랙이 그리드 컨테이너를 넘친다.
(2) grid-template-columns: auto
그리드 항목이 새로운 열로 나열되는 만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성된다. 다만 속성값이 한 개인 만큼 그리드 항목이 1열에서 행 방향으로만 나열되므로 grid-template-columns: none과 같이 작동한다.
(3) grid-template-columns: auto auto
그리드 항목이 새로운 열로 나열되는 만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성된다. 각 열의 너빗값은 그리드 컨테이너의 너빗값을 열의 개수로 나눈 값인데, 각 열의 최소 너빗값은 그리드 항목 내 콘텐츠의 너빗값이 된다. 예를 들어 그리드 컨테이너의 너빗값이 각 열의 너빗값의 총 합보다 작으면 각 열의 너빗값은 그리드 항목 내 콘텐츠의 크기가 되므로 그리드 컨테이너 내 열 방향으로 나열된 그리드 트랙이 그리드 컨테이너를 넘친다. 두 가지 속성값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열과 두 번째 열의 너빗값은 auto이다.
(4) grid-template-columns: 50px 20%
두 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열의 너빗값은 50px이고 두 번째 열의 너빗값은 20%이다. 만약에 그리드 컨테이너의 너빗값이 100%가 아닌 50px인 경우 그리드 트랙의 너빗값의 총합이 그리드 컨테이너의 너빗값을 초과하게 되어 그리드 트랙이 그리드 컨테이너를 넘친다.
(5) grid-template-columns: 50px 1fr 1fr 1fr 1fr
다섯 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 다섯 개가 생성된다. 첫 번째 열의 너빗값은 50px이고 나머지 각 열의 높이 값은 1fr인데, 두 번째 열부터 다섯 번째 열까지의 너빗값은 그리드 컨테이너의 너빗값 100%에서 50px을 제외한 공간의 크기를 사등분 해서 나누어 가진다.
(6) grid-template-columns: [col1-li] 1fr [col2-li-st] 1fr [col2-li-en col3-li] 1fr [col4-li]
세 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 열의 너빗값은 1fr로 그리드 컨테이너의 너빗값 100%를 삼등분해서 나누어 가진다. 그리고 그리드 라인에 이름을 지정할 수 있고, [col2-li-en col3-li]처럼 한 그리드 라인에 여러 개의 이름을 지정할 수도 있다.
(7) grid-template-columns: minmax(50px, 1fr) 50px
두 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열의 너빗값은 minmax(50px, 1fr)로 최소 50px 이상이고 최대 1fr을 초과할 수 없는데, 두 번째 열의 너빗값이 50px이므로 그리드 컨테이너의 너빗값 100%에서 50px을 제외한 값이 된다.
(8) grid-template-columns: 50px fit-content(120px)
fit-content 함수는 minmax(auto, max-content)와 유사하게 작동한다. 두 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열의 너빗값은 50px이고 두 번째 열의 너빗값은 그리드 항목 내 콘텐츠의 너빗값을 따르지만 최대 너빗값은 120px이하가 된다. 다만 콘텐츠 내용이 ‘ddd ddd ddd ddd’처럼 줄 바꿈이 되는 형태가 아니라 ‘dddddddddddddddddddd’처럼 120px을 초과하는 경우 초과된 콘텐츠의 크기를 따른다.
(9) grid-template-columns: repeat(3, 15%)
세 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 열의 너빗값은 15%이다. 만약에 그리드 항목 내 콘텐츠의 너빗값이 그리드 트랙의 너빗값인 15%를 초과할 경우 콘텐츠가 그리드 트랙을 넘친다.
(10) grid-template-columns: 50px repeat(auto-fill, 30px)
auto-fill 함수가 적용되면 grid-template-columns 속성 내에서 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 첫 번째 열의 너빗값은 50px이므로 그리드 컨테이너의 너빗값 100%에서 50px을 제외하고 30px로 나눈 개수만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성된다.
(11) grid-template-columns: repeat(auto-fill, minmax(32px, 1fr))
auto-fill 함수가 적용되면 grid-template-columns 속성 내에서 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너 내 열 방향으로 최소 너빗값이 32px이고 최대 너빗값은 1fr인 명시적인 그리드 트랙이 그리드 컨테이너를 남는 공간 없이 가득 채울 수 있는 만큼 자동으로 생성된다. 그리드 컨테이너의 너빗값이 100%일 때 최소 너비가 32px 이상인 그리드 트랙이 필요한 만큼 생성되기 때문에 뷰포트의 너비에 맞춰서 그리드 트랙의 너빗값이 32px 이상으로 자동 조절된다.
(12) grid-template-columns: 50px repeat(auto-fit, 30px)
auto-fit 함수가 적용되면 grid-template-columns 속성 내에서 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성되는데, 그리드 항목이 없는 빈 열의 너빗값이 축소된다. 첫 번째 열의 너빗값은 50px이므로 그리드 컨테이너의 너빗값 100%에서 50px을 제외하고 30px로 나눈 개수만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성되는데, 그리드 항목이 포함된 첫 번째 열부터 여섯 번째 열까지를 제외한 나머지 열은 그리드 항목이 없는 빈 열이므로 너빗값이 축소된다.
(13) grid-template-columns: repeat(auto-fit, minmax(32px, 1fr))
auto-fit 함수가 적용되면 grid-template-columns 속성 내에서 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성되는데, 그리드 항목이 없는 빈 열의 너빗값이 축소된다. 그리드 컨테이너 내 열 방향으로 최소 너빗값이 32px이고 최대 너빗값은 1fr인 명시적인 그리드 트랙이 그리드 컨테이너를 남는 공간 없이 가득 채울 수 있는 만큼 자동으로 생성되는데, 그리드 항목이 없는 빈 열의 크기를 축소한다. 결과적으로 그리드 컨테이너 내 열 방향으로 나열된 그리드 트랙의 너빗값의 총합이 그리드 컨테이너의 너빗값을 초과하지 않는다면 그리드 항목의 개수만큼 열 방향으로 나열되는 그리드 트랙이 생성되고, 그리드 트랙의 너빗값은 그리드 컨테이너의 너빗값 100%에서 그리드 트랙 개수를 나눈 값이 된다. 만약에 그리드 컨테이너 내 열 방향으로 나열된 그리드 트랙의 너비 값의 총합이 그리드 컨테이너의 너빗값을 초과할 경우 그리드 트랙의 너빗값은 32px로 고정되고 1행을 넘치는 그리드 항목은 줄 바꿈 된다.
○ grid-template-areas
1. 정의
그리드 컨테이너 내 명시적인 그리드 영역과 그리드 셀의 이름을 설정한다.
2. 코드 사용
grid-template-areas:
"a a c"
"a a c"
". b c";
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
4. 속성
(1) grid-template-areas: none
기본값이다. 그리드 컨테이너 내 그리드 셀에 대한 이름을 지정하지 않는다.
(2) grid-template-areas: <string>
나열된 모든 문자열을 기반으로 행과 열이 생성되고 그리드 영역을 구성하는 그리드 셀에 이름이 설정된다. 같은 문자열이 하나의 영역으로 묶이는데, 직사각형 형태만 정상적으로 인식된다. ‘.(점)’은 이름이 지정되지 않는 그리드 셀이다.
○ grid-auto-flow
1. 정의
그리드 컨테이너 내 자동 배치 알고리즘이 작동하는 방식을 설정한다.
2. 코드 사용
grid-auto-flow: row;
grid-auto-flow: columns;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: columns dense;
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
4. 속성
(1) grid-auto-flow: row
기본값이다. 각 행의 순서대로 그리드 항목을 배치하고 필요에 따라 새로운 행을 추가한다.
(2) grid-auto-flow: column
각 열의 순서대로 그리드 항목을 배치하고 필요에 따라 새로운 열을 추가한다.
(3) grid-auto-flow: dense
각 행의 순서대로 그리드 항목을 배치하고 필요에 따라 새로운 행을 추가한다. 단 그리드 항목마다 크기가 달라서 그리드 컨테이너 내 그리드 항목이 순서대로 가득 채워질 수 없는 경우 빈 곳이 발생하는데, 그리드 항목 중 빈 곳을 채울 수 있는 그리드 항목이 있다면 해당 그리드 항목이 빈 곳으로 배치된다.
5. 코드 예시
(1) grid-auto-flow: row
그리드 항목이 열 방향으로 나열되다가 열을 가득 채우거나 공간이 부족한 경우 그다음 행으로 넘어가서 다시 열 방향으로 나열된다.
(2) grid-auto-flow: column
그리드 항목이 행 방향으로 나열되다가 행을 가득 채우거나 공간이 부족한 경우 그다음 열로 넘어가서 다시 행 방향으로 나열된다.
(3) grid-auto-flow: dense
그리드 항목이 열 방향으로 나열되다가 열을 가득 채우거나 공간이 부족한 경우 그다음 행으로 넘어가서 다시 열 방향으로 나열된다. 단 공간이 부족해서 빈 곳이 발생했을 때 그 빈 곳에 들어갈 수 있는 그리드 항목이 있다면 해당 그리드 항목이 빈 곳으로 배치된다.
○ grid-auto-rows
1. 정의
그리드 컨테이너 내 행 방향으로 나열되는 암시적인 그리드 트랙의 크기를 설정한다.
2. 코드 사용
grid-auto-rows: auto;
grid-auto-rows: min-content;
grid-auto-rows: max-content;
grid-auto-rows: minmax(50px, auto);
grid-auto-rows: 50px minmax(50px auto) 5% 2fr fit-content(400px);
3. 호환성
– 인터넷 익스플로러 10 버전에서 사용하려면 -ms-grid-rows로 작성해야 한다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
4. 코드 예시
※ 2행 그리드 행 방향으로 명시적인 그리드 트랙이 없음 grid-template-columns: 1fr 1fr; ※ 그리드 항목 5개
(1) grid-auto-rows: auto
grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 그리드 컨테이너 내 그리드 항목이 나열되어 행이 생성되어야 하는 만큼 행 방향으로 암시적인 그리드 트랙이 생성된다. 각 행의 높이 값은 그리드 컨테이너의 높이 값에 맞춰 자동으로 달라지는데, 행의 최소 높이 값은 인라인 콘텐츠가 없는 경우 padding: 4px, border:1px solid #aaa, box-sizing:border-box에 따라 10px이 되고, 인라인 콘텐츠가 있는 경우 padding:4px, border:1px solid #aaa, line-height:18px, box-sizing:border-box에 따라 28px가 된다. 행의 최대 높이 값은 그리드 컨테이너의 높이 값이 커질수록 일정한 비율에 따라 자동으로 커진다.
(2) grid-auto-rows: 30px
grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 그리드 컨테이너 내 그리드 항목이 나열되어 행이 생성되어야 하는 만큼 행 방향으로 암시적인 그리드 트랙이 생성된다. 각 행의 높이 값은 30px로 고정된다. 그리드 항목 내 콘텐츠의 높이 값이 행의 높이 값보다 큰 경우 그리드 항목 내 콘텐츠가 행을 넘친다.
(3) grid-auto-columns: minmax(12px, auto)
grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 그리드 컨테이너 내 그리드 항목이 나열되어 행이 생성되어야 하는 만큼 행 방향으로 암시적인 그리드 트랙이 생성된다. 각 행의 높이 값은 최소 높이 값은 12px이 되고, 최대 높이 값은 그리드 컨테이너의 높이 값에 맞춰 자동으로 달라진다. 그리드 항목 내 콘텐츠의 최소 높이 값은 padding: 4px, border:1px solid #aaa, box-sizing:border-box에 따라 10px이지만, grid-auto-columns: minmax(12px, auto)에 의해 12px 미만으로 작아지지 않는다. 그리드 항목 내 콘텐츠의 높이 값이 행의 높이 값보다 큰 경우 그리드 항목 내 콘텐츠가 행을 넘친다.
○ grid-auto-columns
1. 정의
그리드 컨테이너 내 열 방향으로 나열되는 암시적인 그리드 트랙의 크기를 설정한다.
2. 코드 사용
grid-auto-columns: auto;
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: minmax(50px, auto);
grid-auto-columns: 50px minmax(50px auto) 5% 2fr fit-content(400px);
3. 호환성
– 인터넷 익스플로러 10 버전에서 사용하려면 -ms-grid-rows로 작성해야 한다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 지원한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 지원한다.
4. 코드 예시
※ 2열 그리드 열 방향으로 명시적인 그리드 트랙이 없음 grid-template-row: 1fr 1fr 1fr 1fr; ※ 그리드 항목 5개 ※ 첫 번째 그리드 항목과 두 번째 그리드 항목 각각 grid-column: 1/3, grid-column: 2를 적용함.
(1) grid-auto-columns: auto
grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 grid-auto-columns: auto가 적용되어도 그리드 컨테이너 내 그리드 항목이 나열될 때 행 방향으로 나열되고 5행 1열 그리드로 보인다. 이때 임의로 각 그리드 항목에 grid-column 속성으로 2열을 암시하는 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정하면 1열 그리드가 2열 그리드로 작동된다. 열의 최소 너빗값은 인라인 콘텐츠가 없는 경우 padding: 4px, border:1px solid #aaa, box-sizing:border-box에 따라 10px이 되고, 인라인 콘텐츠가 있는 경우 padding: 4px, border:1px solid #aaa, box-sizing:border-box와 콘텐츠의 너빗값에 따라 유동적으로 결정된다. 단 1열에 여러 개의 그리드 항목이 위치할 경우 그리드 항목 내 콘텐츠의 너빗값이 가장 넓은 그리드 항목의 너빗값이 해당 열의 최소 너빗값으로 결정된다. 열의 최대 너빗값은 그리드 컨테이너의 너빗값이 커질수록 일정한 비율에 따라 자동으로 커진다.
(2) grid-auto-columns: 30px
grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 grid-auto-columns: auto가 적용되어도 그리드 컨테이너 내 그리드 항목이 나열될 때 행 방향으로 나열되고 5행 1열 그리드로 보인다. 이때 임의로 각 그리드 항목에 grid-column 속성으로 2열을 암시하는 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정하면 1열 그리드가 2열 그리드로 작동된다. 각 열의 너빗값은 30px로 고정된다. 그리드 항목 내 콘텐츠의 너빗값이 열의 너빗값보다 큰 경우 그리드 항목 내 콘텐츠가 열을 넘친다.
(3) grid-auto-columns: min-content
grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 grid-auto-columns: auto가 적용되어도 그리드 컨테이너 내 그리드 항목이 나열될 때 행 방향으로 나열되고 5행 1열 그리드로 보인다. 이때 임의로 각 그리드 항목에 grid-column 속성으로 2열을 암시하는 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정하면 1열 그리드가 2열 그리드로 작동된다. 각 열의 너빗값은 콘텐츠의 너빗값으로 고정되는데, 1열에 여러 개의 그리드 항목이 위치할 경우 그리드 항목 내 콘텐츠의 너빗값이 가장 넓은 그리드 항목의 너빗값이 해당 열의 너빗값으로 결정된다.
○ gap
1. 정의
그리드 컨테이너 내 행 방향의 그리드 트랙과 열 방향의 그리드 트랙 사이의 간격을 설정한다. 속성 명칭은 grid-gap 속성이 정의된 이후 gap 속성으로 대체중이다. row-gap, column-gap 속성의 단축 구문이다.
2. 코드 사용
gap: <row-gap> <column-gap>;3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 사용하려면 grid-gap로 작성해야 한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 7.0 버전 이상에서 사용하려면 grid-gap로 작성해야 한다.
– 인터넷 익스플로러, 사파리, Safari on iOS에서 calc() 값과 퍼센트 값을 지원하지 않는다.
○ row-gap
1. 정의
그리드 컨테이너 내 행 방향의 그리드 트랙 사이의 간격을 설정한다. 속성 명칭은 grid-row-gap 속성이 정의된 이후 row-gap 속성으로 대체 중이다.
2. 코드 사용
row-gap: normal
row-gap: 10px;
row-gap: 5%;
row-gap: 5em;
row-gap: 5vmin;
row-gap: 5cm;
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 사용하려면 grid-row-gap로 작성해야 한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 사용하려면 grid-row-gap로 작성해야 한다.
4. 코드 예시
※ 2열 그리드 열 방향으로 명시적인 그리드 트랙이 있음 grid-template-columns: 1fr 1fr; ※ 그리드 항목 5개
(1) row-gap: normal
기본값이다.
(2) row-gap: 10px
그리드 컨테이너 내 그리드 항목의 면이 그리드 컨테이너에 닿는 부분에는 row-gap 속성이 영향을 미치지 않는다. 그리드 컨테이너 내 행 방향으로 나열된 그리드 항목 사이에 10px의 간격이 설정된다. 그리고 간격의 크기가 큰 경우 그리드 항목이 그리드 컨테이너를 넘칠 수 있다.
○ column-gap
1. 정의
그리드 컨테이너 내 열 방향의 그리드 트랙 사이의 간격을 설정한다. 속성 명칭은 grid-column-gap 속성이 정의된 이후 column-gap 속성으로 대체 중이다.
2. 코드 사용
column-gap: normal;
column-gap: 5px;
column-gap: 5%;
column-gap: 5em;
column-gap: 5rem;
3. 호환성
– 인터넷 익스플로러에서 지원하지 않는다.
– 2017년 3월에 출시한 크롬 57 버전, Safari on iOS 10.3 버전 이상에서 사용하려면 grid-row-gap로 작성해야 한다.
– 2017년 하반기에 출시한 엣지 16 버전, 삼성 인터넷 6.0 버전 이상에서 사용하려면 grid-row-gap로 작성해야 한다.
4. 코드 예시
※ 2열 그리드 열 방향으로 명시적인 그리드 트랙이 있음 grid-template-columns: 1fr 1fr; ※ 그리드 항목 5개
(1) column-gap: normal
기본값이다.
(2) column-gap: 10px
그리드 컨테이너 내 그리드 항목의 면이 그리드 컨테이너에 닿는 부분에는 column-gap 속성이 영향을 미치지 않는다. 그리드 컨테이너 내 열 방향으로 나열된 그리드 항목 사이에 10px의 간격이 설정된다. 그리고 간격의 크기가 큰 경우 그리드 항목이 그리드 컨테이너를 넘칠 수 있다.