CSS 페이지 레이아웃 5부 – grid layout 그리드 컨테이너 속성

CSS 페이지 레이아웃 속성은 사용자가 원하는 대로 요소들을 배치하기 위해 사용하며, Display, Flexbox, Grid, Floats, Positioning, Table Layout, Multistage Layout 등이 있다. 속성마다 장단점이 있어서 각 속성을 정확히 파악하고 사용해야 한다. Grid Layout 컨테이너 속성에 대한 정보를 기록하고자 CSS 페이지 레이아웃 5부를 작성했다.

주의사항
1. 모든 예시는 크롬 브라우저 기준이다.
2. 그리드 레이아웃은 플렉스 레이아웃보다 훨씬 더 복잡하기 때문에 가장 기본적인 예시만 다룬다.
3. 그리드 레이아웃을 설명할 때 아랍어 방향은 고려하지 않는다.
4. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

  1. Floats 및 Clear
  2. Positioning
  3. Display Outside 및 Inside
  4. Display Flow-root
  5. Display Table
  1. Display Flex
    6-1. Display Flex – flexbox 속성
    6-2. Display Flex – flexbox 정렬 속성 요약
    6-3. Display Flex – flexbox 정렬 속성
  1. 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 정렬 속성
Quick Menu
  1. Multi-column Layout
  2. Media Query
  3. 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>
aa
bbb
ccccc
ddd
eeee
ff
ggg
hhhh

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>
aa
bbb
ccccc
ddd
eeee
ff
ggg
hhhh

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>
aa
bbb
ccccc
ddd
eeee
ff
ggg
hhhh

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>
aa
bbb
ccccc
ddd
eeee
ff

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
aa
bbb
ccccc
ddd
eeee
ff

기본값이다. 그리드 컨테이너 내에서 행 방향으로 명시적인 그리드 트랙이 생성되지 않고, 필요한 경우 암시적인 그리드 트랙이 생성된다. 암시적인 그리드 트랙의 크기는 grid-auto-rows 속성으로 결정된다.

(2) grid-template-rows: auto
aa
bbb
ccccc
ddd
eeee
ff

그리드 항목이 새로운 행으로 나열되는 만큼 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 생성된다. 각 행의 높이 값은 그리드 컨테이너의 높이 값을 행의 개수로 나눈 값인데, 각 행의 최소 높이 값은 그리드 항목 내 콘텐츠의 높이 값이 된다. 예를 들어 그리드 컨테이너의 높이 값이 각 행의 높이 값의 총합보다 작을 경우 각 행의 높이 값은 그리드 항목 내 콘텐츠의 높이 값이 되고 그리드 컨테이너 내 행 방향으로 나열된 그리드 트랙이 그리드 컨테이너를 넘친다.

(3) grid-template-rows: 100px 20%
aa
bbb
ccccc
ddd
eeee
ff

두 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 행의 높이 값은 100px이고 두 번째 행의 높이 값은 20%로 그리드 컨테이너의 높이 값 150px의 20%인 30px이 된다.

(4) grid-template-rows: 100px 50%
aa
bbb
ccccc
ddd
eeee
ff

두 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 행의 높이 값은 100px이고 두 번째 행의 높이 값은 50%로 그리드 컨테이너의 높이 값인 150px의 50%인 75px이 된다. 2행의 높이 값의 합이 175px로 그리드 컨테이너 높이 값인 150px를 초과하므로 행 방향으로 나열된 그리드 트랙이 그리드 컨테이너를 넘친다.

(5) grid-template-rows: 100px 1fr 1fr 1fr 1fr
aa
bbb
ccccc
ddd
eeee
ff

다섯 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 다섯 개가 생성된다. 첫 번째 행의 높이 값은 100px이고 나머지 각 행의 높이 값은 1fr인데, 그리드 항목이 위치하는 두 번째 행은 그리드 항목 내 콘텐츠 크기에 따라 높이 값이 결정되고, 그리드 항목이 없는 세 번째 행, 네 번째 행, 다섯 번째 행은 남는 공간을 나누어 가진다.

(6) grid-template-rows: [row1-li] 1fr [row2-li-st] 1fr [row2-li-en row3-li] 1fr [row4-li]
aa
bbb
ccccc
ddd
eeee
ff

세 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 행의 높이 값은 1fr로 그리드 컨테이너의 높이 값 150px을 각 50px 씩 나누어 가진다. 그리고 그리드 라인에 이름을 지정할 수 있고, [row2-li-en row3-li]처럼 한 그리드 라인에 여러 개의 이름을 지정할 수도 있다.

(7) grid-template-rows: minmax(100px, 1fr)
aa
bbb
ccccc
ddd
eeee
ff

한 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 한 개가 생성된다. 첫 번째 행의 높이 값은 minmax(100px, 1fr)로 최소 100px 이상이고 최대 1fr을 초과할 수 없는데, 그리드 컨테이너 내 암시적인 그리드 트랙 1행이 추가로 생성되어 있어서 그리드 컨테이너의 높이 값 150px에서 암시적인 그리드 트랙의 높이 값인 28px을 제외한 128px이 된다.

(8) grid-template-rows: 50px fit-content(80px)
aa
bbb
ccccc
ddd
eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee eeee
ff

fit-content 함수는 minmax(auto, max-content)와 유사하게 작동한다. 두 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 행의 높이 값은 50px이고 두 번째 행의 높이 값은 그리드 항목 내 콘텐츠의 높이 값을 따르지만 최대 높이 값은 80px이하가 된다. 다만 두 번째 행 내 콘텐츠 내용이 줄 바꿈되어 최대 높이 값인 80px를 초과하면 두 번째 행의 높이 값이 콘텐츠의 높이 값으로 변경되므로 사실상 grid-template-rows 속성에서 fit-content의 인수는 무의하다.

(9) grid-template-rows: repeat(3, 15%)
aa
bbb
ccccc
ddd
eeee
ff

세 가지 값이 작성되어 그리드 컨테이너의 행 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 행의 높이 값은 15%로 그리드 컨테이너의 높이 값 150px에서 15%인 22.5px이 된다. 그리드 항목 내 콘텐츠의 높이 값이 28px인데 그리드 컨테이너 내 행 방향으로 나열된 그리드 트랙의 높이 값이 22.5px로 더 작기 때문에 콘텐츠가 그리드 트랙을 넘친다.

(10) grid-template-rows: 50px repeat(auto-fill, 30px)
aa
bbb
ccccc
ddd
eeee
ff

auto-fill 함수가 적용되면 grid-template-rows 속성 내에서 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너의 높이 값이 150px이고 첫 번째 행의 높이 값이 50px이므로 두 번째 행부터는 100px을 30px로 나눈 개수만큼 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 생성된다. 결과적으로 첫 번째 행의 높이 값은 50px, 두 번째 행의 높이 값은 30px, 세 번째 행의 높이 값은 30px, 네 번째행의 높이 값은 30px가 되고 10px의 공간이 남는다.

(11) grid-template-rows: repeat(auto-fill, minmax(30px, 1fr))
aa
bbb
ccccc
ddd
eeee
ff

auto-fill 함수가 적용되면 grid-template-rows 속성 내에서 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너 내 행 방향으로 최소 높이 값이 32px이고 최대 높이 값이 1fr인 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너의 높이 값이 150px일 때 최소 높이가 32px인 그리드 트랙은 네 개까지 생성될 수 있고 최대 높이가 1fr 이하여야 하므로 그리드 컨테이너의 높이 값을 사 등분 해서 높이 값이 37.5px인 그리드 트랙 네 개가 생성된다.

(12) grid-template-rows: 50px repeat(auto-fit, 30px)
aa
bbb
ccccc
ddd
eeee
ff

auto-fit 함수가 적용되면 grid-template-rows 속성 내에서 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성되는데, 그리드 항목이 없는 빈 행의 높이 값이 축소된다. 그리드 컨테이너의 높이 값이 150px이고 첫 번째 행의 높이 값이 50px이므로 두 번째 행부터는 100px을 30px로 나눈 개수만큼 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙을 생성하는데, 세 번째 행과 네 번째 행은 그리드 항목이 없는 빈 행이기 때문에 높이 값이 축소된다.

(13) grid-template-rows: repeat(auto-fit, minmax(30px, 1fr))
aa
bbb
ccccc
ddd
eeee
ff

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
aa
bbb
ccccc
ddd
eeee
ff

기본값이다. 그리드 컨테이너 내에서 열 방향으로 명시적인 그리드 트랙이 생성되지 않는다. 그리드 컨테이너 내 행 방향으로 명시적인 그리드 트랙 세 개가 생성되지만, 그리드 항목 6개가 나열되므로 행 방향으로 암시적인 그리드 트랙 세 개가 추가로 생성되고 각 그리드 트랙의 높이 값의 총합이 그리드 컨테이너의 높이 값을 초과하므로 그리드 트랙의 높이 값이 그리드 트랙 내 콘텐츠의 높이 값으로 최소화된다. 그리고 각 그리드 트랙 내 콘텐츠의 높이 값이 총합이 그리드 컨테이너의 높이 값을 초과할 경우 그리드 트랙이 그리드 컨테이너를 넘친다.

(2) grid-template-columns: auto
aa
bbb
ccccc
ddd
eeee
ff

그리드 항목이 새로운 열로 나열되는 만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성된다. 다만 속성값이 한 개인 만큼 그리드 항목이 1열에서 행 방향으로만 나열되므로 grid-template-columns: none과 같이 작동한다.

(3) grid-template-columns: auto auto
aa
bbb
ccccc
ddd
eeee
ff

그리드 항목이 새로운 열로 나열되는 만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성된다. 각 열의 너빗값은 그리드 컨테이너의 너빗값을 열의 개수로 나눈 값인데, 각 열의 최소 너빗값은 그리드 항목 내 콘텐츠의 너빗값이 된다. 예를 들어 그리드 컨테이너의 너빗값이 각 열의 너빗값의 총 합보다 작으면 각 열의 너빗값은 그리드 항목 내 콘텐츠의 크기가 되므로 그리드 컨테이너 내 열 방향으로 나열된 그리드 트랙이 그리드 컨테이너를 넘친다. 두 가지 속성값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열과 두 번째 열의 너빗값은 auto이다.

(4) grid-template-columns: 50px 20%
aa
bbb
ccccc
ddd
eeee
ff

두 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열의 너빗값은 50px이고 두 번째 열의 너빗값은 20%이다. 만약에 그리드 컨테이너의 너빗값이 100%가 아닌 50px인 경우 그리드 트랙의 너빗값의 총합이 그리드 컨테이너의 너빗값을 초과하게 되어 그리드 트랙이 그리드 컨테이너를 넘친다.

(5) grid-template-columns: 50px 1fr 1fr 1fr 1fr
aa
bbb
ccccc
ddd
eeee
ff

다섯 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 다섯 개가 생성된다. 첫 번째 열의 너빗값은 50px이고 나머지 각 열의 높이 값은 1fr인데, 두 번째 열부터 다섯 번째 열까지의 너빗값은 그리드 컨테이너의 너빗값 100%에서 50px을 제외한 공간의 크기를 사등분 해서 나누어 가진다.

(6) grid-template-columns: [col1-li] 1fr [col2-li-st] 1fr [col2-li-en col3-li] 1fr [col4-li]
aa
bbb
ccccc
ddd
eeee
ff

세 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 열의 너빗값은 1fr로 그리드 컨테이너의 너빗값 100%를 삼등분해서 나누어 가진다. 그리고 그리드 라인에 이름을 지정할 수 있고, [col2-li-en col3-li]처럼 한 그리드 라인에 여러 개의 이름을 지정할 수도 있다.

(7) grid-template-columns: minmax(50px, 1fr) 50px
aa
bbb
ccccc
ddd
eeee
ff

두 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열의 너빗값은 minmax(50px, 1fr)로 최소 50px 이상이고 최대 1fr을 초과할 수 없는데, 두 번째 열의 너빗값이 50px이므로 그리드 컨테이너의 너빗값 100%에서 50px을 제외한 값이 된다.

(8) grid-template-columns: 50px fit-content(120px)
aa
bbb
ccccc
ddd ddd ddd ddd ddd
eeee
ff

fit-content 함수는 minmax(auto, max-content)와 유사하게 작동한다. 두 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 두 개가 생성된다. 첫 번째 열의 너빗값은 50px이고 두 번째 열의 너빗값은 그리드 항목 내 콘텐츠의 너빗값을 따르지만 최대 너빗값은 120px이하가 된다. 다만 콘텐츠 내용이 ‘ddd ddd ddd ddd’처럼 줄 바꿈이 되는 형태가 아니라 ‘dddddddddddddddddddd’처럼 120px을 초과하는 경우 초과된 콘텐츠의 크기를 따른다.

(9) grid-template-columns: repeat(3, 15%)
aa
bbb
ccccc
ddd
eeee
ff

세 가지 값이 작성되어 그리드 컨테이너의 열 방향으로 명시적인 그리드 트랙 세 개가 생성된다. 각 열의 너빗값은 15%이다. 만약에 그리드 항목 내 콘텐츠의 너빗값이 그리드 트랙의 너빗값인 15%를 초과할 경우 콘텐츠가 그리드 트랙을 넘친다.

(10) grid-template-columns: 50px repeat(auto-fill, 30px)
aa
bbb
ccccc
ddd
eeee
ff

auto-fill 함수가 적용되면 grid-template-columns 속성 내에서 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 첫 번째 열의 너빗값은 50px이므로 그리드 컨테이너의 너빗값 100%에서 50px을 제외하고 30px로 나눈 개수만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성된다.

(11) grid-template-columns: repeat(auto-fill, minmax(32px, 1fr))
aa
bbb
ccccc
ddd
eeee
ff

auto-fill 함수가 적용되면 grid-template-columns 속성 내에서 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성된다. 그리드 컨테이너 내 열 방향으로 최소 너빗값이 32px이고 최대 너빗값은 1fr인 명시적인 그리드 트랙이 그리드 컨테이너를 남는 공간 없이 가득 채울 수 있는 만큼 자동으로 생성된다. 그리드 컨테이너의 너빗값이 100%일 때 최소 너비가 32px 이상인 그리드 트랙이 필요한 만큼 생성되기 때문에 뷰포트의 너비에 맞춰서 그리드 트랙의 너빗값이 32px 이상으로 자동 조절된다.

(12) grid-template-columns: 50px repeat(auto-fit, 30px)
aa
bbb
ccccc
ddd
eeee
ff

auto-fit 함수가 적용되면 grid-template-columns 속성 내에서 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 필요한 만큼 자동으로 생성되는데, 그리드 항목이 없는 빈 열의 너빗값이 축소된다. 첫 번째 열의 너빗값은 50px이므로 그리드 컨테이너의 너빗값 100%에서 50px을 제외하고 30px로 나눈 개수만큼 그리드 컨테이너 내 열 방향으로 명시적인 그리드 트랙이 생성되는데, 그리드 항목이 포함된 첫 번째 열부터 여섯 번째 열까지를 제외한 나머지 열은 그리드 항목이 없는 빈 열이므로 너빗값이 축소된다.

(13) grid-template-columns: repeat(auto-fit, minmax(32px, 1fr))
aa
bbb
ccccc
ddd
eeee
ff

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
aaa
bbb
ccc
ddd
eee
fff
ggg
hhh
iii
jjj
kkk
lll
mm

그리드 항목이 열 방향으로 나열되다가 열을 가득 채우거나 공간이 부족한 경우 그다음 행으로 넘어가서 다시 열 방향으로 나열된다.

(2) grid-auto-flow: column
aaa
bbb
ccc
ddd
eee
fff
ggg
hhh
iii
jjj
kkk
lll
mm

그리드 항목이 행 방향으로 나열되다가 행을 가득 채우거나 공간이 부족한 경우 그다음 열로 넘어가서 다시 행 방향으로 나열된다.

(3) grid-auto-flow: dense
aaa
bbb
ccc
ddd
eee
fff
ggg
hhh
iii
jjj
kkk
lll
mm

그리드 항목이 열 방향으로 나열되다가 열을 가득 채우거나 공간이 부족한 경우 그다음 행으로 넘어가서 다시 열 방향으로 나열된다. 단 공간이 부족해서 빈 곳이 발생했을 때 그 빈 곳에 들어갈 수 있는 그리드 항목이 있다면 해당 그리드 항목이 빈 곳으로 배치된다.

○ 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
aaa
bbb
ccc
ddd

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
aaa
bbb
ccc
ddd

grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 그리드 컨테이너 내 그리드 항목이 나열되어 행이 생성되어야 하는 만큼 행 방향으로 암시적인 그리드 트랙이 생성된다. 각 행의 높이 값은 30px로 고정된다. 그리드 항목 내 콘텐츠의 높이 값이 행의 높이 값보다 큰 경우 그리드 항목 내 콘텐츠가 행을 넘친다.

(3) grid-auto-columns: minmax(12px, auto)
aaa
bbb
ccc
ddd

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
aaa
bbb
ccc
ddd

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
aaa
bbb
ccc
ddd

grid-auto-flow: row(기본값)에 의해 각 행의 순서대로 그리드 항목이 배치되고 필요에 따라 새로운 행이 추가되므로 grid-auto-columns: auto가 적용되어도 그리드 컨테이너 내 그리드 항목이 나열될 때 행 방향으로 나열되고 5행 1열 그리드로 보인다. 이때 임의로 각 그리드 항목에 grid-column 속성으로 2열을 암시하는 ‘시작 그리드 라인’과 ‘끝 그리드 라인’을 설정하면 1열 그리드가 2열 그리드로 작동된다. 각 열의 너빗값은 30px로 고정된다. 그리드 항목 내 콘텐츠의 너빗값이 열의 너빗값보다 큰 경우 그리드 항목 내 콘텐츠가 열을 넘친다.

(3) grid-auto-columns: min-content
aaa
bbb
ccc
ddd

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
aaa
bbb
ccc
ddd
eee

기본값이다.

(2) row-gap: 10px
aaa
bbb
ccc
ddd
eee

그리드 컨테이너 내 그리드 항목의 면이 그리드 컨테이너에 닿는 부분에는 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
aaa
bbb
ccc
ddd
eee

기본값이다.

(2) column-gap: 10px
aaa
bbb
ccc
ddd
eee

그리드 컨테이너 내 그리드 항목의 면이 그리드 컨테이너에 닿는 부분에는 column-gap 속성이 영향을 미치지 않는다. 그리드 컨테이너 내 열 방향으로 나열된 그리드 항목 사이에 10px의 간격이 설정된다. 그리고 간격의 크기가 큰 경우 그리드 항목이 그리드 컨테이너를 넘칠 수 있다.

출처

관련 글

최종 업데이트:

댓글쓰기