CSS Grid

HTML & CSS / CSS

CSS 그리드는 더 복잡한 레이아웃을 위해 2치원 레이아웃 시스템을 제공한다. 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 CSS 모듈이다. 효율적으로 학습하기 위해서는 파이어폭스 브라우저를 사용하는 것이 좋다.

Grid Properties

Container(컨테이너)와 Item(아이템)이라는 두가지 개념으로 구분되어 있다. Container가 부모 요소이며 그 안에 각각 Item을 배치할 수 있다.

Grid Container Properties

속성 의미
display 그리드 컨테이너(Container)를 정의
grid-template-rows 명시적 행(Track)의 크기를 정의
grid-template-columns 명시적 열(Track)의 크기를 정의
grid-template-areas 영역(Area) 이름을 참조해 템플릿 생성
grid-template grid-template-xxx의 단축 속성
row-gap(grid-row-gap) 행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap) 열과 열 사이의 간격(Line)을 정의
gap(grid-gap) xxx-gap의 단축 속성
grid-auto-rows 암시적인 행(Track)의 크기를 정의
grid-auto-columns 암시적인 열(Track)의 크기를 정의
grid-auto-flow 자동 배치 알고리즘 방식을 정의
grid grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content 그리드 콘텐츠를 수평(행 축) 정렬
place-content align-content와 justify-content의 단축 속성
align-items 그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items 그리드 아이템들을 수평(행 축) 정렬
place-items align-items와 justify-items의 단축 속성

Grid Item Properties

속성 의미
grid-row-start 그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end 그리드 아이템의 행 끝 위치 지정
grid-row grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start 그리드 아이템의 열 시작 위치 지정
grid-column-end 그리드 아이템의 열 끝 위치 지정
grid-column grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self 단일 그리드 아이템을 수직(열 축) 정렬
justify-self 단일 그리드 아이템을 수평(행 축) 정렬
place-self align-self와 justify-self의 단축 속성
order 그리드 아이템의 배치 순서를 지정
z-index 그리드 아이템의 쌓이는 순서를 지정

Grid Containers

display

Grid Container를 정의한다. 하위 요소들은 자동적으로 Grid Items로 정의된다. 그리드를 사용하기 위해서는 컨테이너에 필수적으로 작성해야 한다.

값 의미
grid Block 특성의 Grid Container를 정의
inline-grid Inline 특성의 Grid Container를 정의 
1
2
3
.container {
  display: grid;
}

grid-template-rows

  • 명시적 행(Track)의 크기를 정의한다.
  • 동시에 라인(Line)의 이름도 정의할 수 있다.
  • fr(fraction, 공간 비율) 단위를 사용할 수 있다.
  • repeat() 함수를 사용할 수 있다.
  • 라인 이름은 자동으로 지정되어 있기 때문에 꼭 필요한 경우가 아니면 따로 정의할 필요가 없다.
1
2
3
4
5
.container {
  display: grid;
  grid-template-rows: 1행크기 2행크기 ...;
  grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}

grid-template-rows

grid-template-columns

  • 명시적 열(Track)의 크기를 정의한다.
  • 동시에 라인(Line)의 이름도 정의할 수 있다.
  • fr(fraction, 공간 비율) 단위를 사용할 수 있다. 각 컬럼은 비율에 맞게 출력되기 때문에 컨테이너의 너비가 가변해도 열 크기를 수정할 필요가 없다.
  • repeat() 함수를 사용할 수 있다. 2번째 인수를 반복한다.
1
2
3
4
5
.container {
  display: grid;
  grid-template-columns: 1열크기 2열크기 ...;
  grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 [선이름] ...;
}

grid-template-areas

지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성한다.

  • Grid Item에 적용하는 속성이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
.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";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

grid-template-areas

  • .(마침표)를 사용하거나 명시적으로 none을 입력해 빈 영역을 정의할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main . ."
    "main . aside"
    "footer footer footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

grid-template-areas

grid-template

grid-template-rows, grid-template-columns 그리고 grid-template-areas의 단축 속성이다.

1
2
3
4
.container {
  grid-template: <grid-template-rows> / <grid-template-columns>;
  grid-template: <grid-template-areas>;
}
1
2
3
4
5
6
.container {
  grid-template:
    [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
    [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
    / <grid-template-columns>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
    display: grid;
    grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}
header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

/* 다음과 같이 해석 가능 */
.container {
    display: grid;
    grid-template-rows: 80px 350px 130px;
    grid-template-columns: 2fr 100px 1fr;
    grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}

row-gap(grid-row-gap)

각 행과 행 사이의 간격(Gutter)을 지정한다. 정확하게는 그리드 선(Grid Line)의 크기를 지정.

1
2
3
.container {
  row-gap: 크기;
}

column-gap(grid-column-gap)

각 열과 열 사이의 간격(Gutter)을 지정한다.

1
2
3
.container {
  column-gap: 크기;
}

gap(grid-gap)

각 행과 행, 열과 열 사이의 간격(Gutter)을 지정한다.

grid-gap(grid-row-gap, grid-column-gap)의 접두사 grid-는 더 이상 사용되지 않으며(Deprecated), gap(row-gap, column-gap)로 교체되었다.

1
2
3
.container {
  gap: <grid-row-gap> <grid-column-gap>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  display: grid;
  grid-template-rows: repeat(2, 150px);
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px;
}
/* 하나의 값으로 통일할 수 있다. */
.container {
  gap: 10px;  /* row-gap: 10px; + column-gap: 10px; */
}
/* 하나의 값만 적용하고자 한다면 다음과 같이 사용할 수 있다. */
.container {
  gap: 10px 0; /* row-gap */
  gap: 0 10px; /* column-gap */
}

grid-gap

grid-auto-rows

암시적 행(Track)의 크기를 정의한다. 아이템(Item)이 grid-template-rows로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용된다.

1
2
3
4
5
6
7
8
9
10
11
.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
  grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
  grid-auto-rows: 100px; /* 그 외(암시적) 행의 크기 정의 */
}
.item:nth-child(3) {
  grid-row: 3 / 4;
}

grid-auto-rows

grid-auto-columns

암시적 열(Track)의 크기를 정의한다. 아이템(Item)이 grid-template-columns로 정의한 명시적 열 외부에 배치되는 경우 암시적 열의 크기가 적용된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 150px 150px;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
}
.item:nth-child(3) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

grid-auto-columns

  • 아이템이 배치되는 위치에 맞게 암시적 행과 열의 개수가 생성된다.
  • 암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있다. (음수 사용 불가)

grid-auto-columns

grid-auto-flow

배치하지 않은 아이템(Item)을 어떤 방식의 ‘자동 배치 알고리즘’으로 처리할지 정의한다. 배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미한다.

값 의미 기본값
row 각 행 축을 따라 차례로 배치 row
column 각 열 축을 따라 차례로 배치
row dense(dense) 각 행 축을 따라 차례로 배치, 빈 영역 메움!
column dense 각 열 축을 따라 차례로 배치, 빈 영역 메움!

row와 row dense

1
2
3
4
5
6
7
8
9
10
/* For row & row dense */
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row || row dense || dense;
}
.item:nth-child(2) {
  grid-column: span 3;
}

grid-auto-flow

column와 column dense

1
2
3
4
5
6
7
8
9
10
11
12
13
/* For column & column dense */
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column || column dense;
}
.item:nth-child(1) {
  grid-column: 2 / span 2;
}
.item:nth-child(2) {
  grid-column: span 2;
}

grid-auto-flow

grid

grid-template-xxx과 grid-auto-xxx의 단축 속성이다.

  • auto-flow 키워드를 사용합니다.
  • /로 구분해 작성하는 위치가 곧 row, column 값을 의미하기 때문에 작성할 필요가 없다.
  • dense 값은 auto-flow 뒤에 붙여준다.

align-content

그리드 콘텐츠(Contents)를 수직(열 축) 정렬한다. 그리드 콘텐츠의 세로 너비가 그리드 컨테이너(Container)보다 작아야 한다.

값 의미 기본값
normal stretch와 같다. normal
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
space-around 각 행 위아래에 여백을 고르게 정렬
space-between 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly 모든 여백을 고르게 정렬
stretch 열 축을 채우기 위해 그리드 콘텐츠를 늘림 
1
2
3
4
5
6
7
8
.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  align-content: <align-content>;
}

grid-align-content

justify-content

그리드 콘텐츠(Contents)를 수평(행 축) 정렬한다. 그리드 콘텐츠의 가로 너비가 그리드 컨테이너(Container)보다 작아야 한다.

값 의미 기본값
normal stretch와 같다. normal
start 시작점(왼쪽) 정렬
center 수평 가운데 정렬
end 끝점(오른쪽) 정렬
space-around 각 열 좌우에 여백을 고르게 정렬
space-between 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬
space-evenly 모든 여백을 고르게 정렬
stretch 행 축을 채우기 위해 그리드 콘텐츠를 늘림 
1
2
3
4
5
6
7
8
.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  justify-content: <justify-content>;
}

grid-justify-content

place-content

align-content와 justify-content의 단축 속성이다.

  • 하나의 값만 입력하면 두 속성에 모두 적용된다.
  • Edge(IE) 브라우저에서 지원하지 않는 속성
1
2
3
.container {
  place-content: <align-content> <justify-content>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 01 */
.container {
  place-content: center space-evenly;
}
.container {
  align-content: center;
  justify-content: space-evenly;
}

/* 02 */
.container {
    place-content: end;
}
.container {
    align-content: end;
    justify-content: end;
}

align-items

그리드 아이템(Items)들을 수직(열 축) 정렬한다. 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 한다.

값 의미 기본값
normal stretch와 같다. normal
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
stretch 열 축을 채우기 위해 그리드 아이템을 늘림 
1
2
3
4
5
6
7
8
.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  align-items: <align-items>;
}

grid-align-items

justify-items

그리드 아이템(Items)들을 수평(행 축) 정렬한다. 그리드 아이템의 가로 너비가 자신이 속한 그리드 열(Track)의 크기보다 작아야 한다.

값 의미 기본값
normal stretch와 같다. normal
start 시작점(왼쪽) 정렬
center 수평 가운데 정렬
end 끝점(오른쪽) 정렬
stretch 행 축을 채우기 위해 그리드 아이템을 늘림 
1
2
3
4
5
6
7
8
.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  justify-items: <justify-items>;
}

grid-justify-items

place-items

align-items와 justify-items의 단축 속성이다.

  • 하나의 값만 입력하면 두 속성에 모두 적용된다.
  • Edge(IE) 브라우저에서 지원하지 않는 속성
1
2
3
.container {
  place-items: <align-items> <justify-items>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 01 */
.container {
    place-items: start stretch;
}
.container {
    align-items: start;
    justify-items: stretch;
}

/* 02 */
.container {
    place-items: center;
}
.container {
    align-items: center;
    justify-items: center;
}

Grid Items

정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의된다.

grid-row-start, grid-row-end, grid-column-start, grid-column-end

  • 그리드 아이템(Item)을 배치하기 위해 그리드 선(Line)의 ‘시작 위치’와 ‘끝 위치’를 지정한다.
  • ‘숫자’를 지정하거나, ‘선 이름’을 지정하거나, span 키워드를 사용한다.
1
2
3
4
5
6
7
8
9
10
11
.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
}

grid-row-column

  • 선의 이름을 지정할 수도 있다.
1
2
3
4
5
6
7
8
9
10
11
.container {
  display: grid;
  grid-template-rows: [row-1st] 1fr [row-2nd] 1fr [row-3rd];
  grid-template-columns: [col-1st] 1fr [col-2nd] 1fr [col-3rd] 1fr [col-4th];
}
.item:nth-child(1) {
  grid-row-start: row-2nd;
  grid-row-end: row-3rd;
  grid-column-start: col-2nd;
  grid-column-end: col-4th;
}

grid-row-column

  • span 키워드를 사용하면 좀 더 쉽게 배치할 수 있다.
  • span 키워드와 ‘숫자’를 조합하면 ‘숫자’만큼 라인을 확장하는(+) 개념이다.
  • 명시하지 않으면 span 1이 기본값.
1
2
3
4
5
6
7
8
9
.item:nth-child(1) {
  /* Row 1번에서 3번(1+2=3)까지 */
  grid-row-start: 1;
  grid-row-end: span 2;

  /* Column 2번에서 3번(2+1=3)까지 */
  grid-column-start: 2;
  /* grid-column-end: span 1; (생략) */
}

grid-row-column

  • span 키워드를 ‘시작 위치’에 작성하고, ‘끝 위치’를 명시해서 확장할(-) 수도 있다.
1
2
3
4
5
6
7
8
9
.item:nth-child(1) {
  /* Column 3번에서 2번(3-1=2)까지 */
  /* grid-row-start: span 1; (생략) */
  grid-row-end: 3;

  /* Column 4번에서 2번(4-2=2)까지 */
  grid-column-start: span 2;
  grid-column-end: 4;
}

grid-row-column

grid-row

grid-row-start과 grid-row-end의 단축 속성이다. 각 속성을 /로 구분하는 것에 주의.

1
2
3
.item {
  grid-row: <grid-row-start> / <grid-row-end>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 01 */
.item {
    grid-row-start: 1;
    grid-row-end: 2;
}
.item {
    grid-row: 1 / 2;
}

/* 02 */
.item {
    grid-row-start: 2;
    grid-row-end: span 3;
}
.item {
    grid-row: 2 / span 3;
}
.item {
    grid-row: 2 / 5;
}

/* 03 */
.item {
    grid-row-start: span 3;
    grid-row-end: 4;
}
.item {
    grid-row: span 3 / 4;
}
.item {
    grid-row: 1 / 4;
}

grid-column

  • grid-column-start과 grid-column-end의 단축 속성이다. 각 속성을 /로 구분하는 것에 주의.
1
2
3
.item {
    grid-column: <grid-column-start> / <grid-column-end>;
}
  • 음수 결과를 위해 span 키워드를 ‘시작 위치’에 작성함에 주의.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 01 */
.item {
  grid-column-start: -1;
  grid-column-end: -3;
}
.item {
  grid-column: -1 / -3;
}
.item {
  /* Column -1번에서 -3번(-1-2=-3)까지 */
  grid-column: span 2 / -1;
}

/* 02 */
.item {
    grid-column-start: 2;
    grid-column-end: -1;
}
.item {
    /* Column 2번에서 끝(-1번)까지 */
    grid-column: 2 / -1;
}

grid-area

grid-row-start, grid-column-start, grid-row-end 그리고 grid-column-end의 단축 속성이다.

  • grid-template-areas가 참조할 영역(Area) 이름을 설정할 수 있다.
  • 영역 이름을 설정할 경우 grid-row와 grid-column 개념은 무시된다.
  • 영역 이름을 지정해 grid-template-areas에서 참조할 수 있다.
1
2
3
4
.item {
  grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
  grid-area: 영역이름;
}
1
2
3
4
5
6
7
8
.item {
  grid-row: 2 / 3;
  grid-column: span 2 / -1;
}
.item {
  /* '시작 / 시작 / 끝 / 끝'임에 주의합시다! */
  grid-area: 2 / span 2 / 3 / -1;
}
  • 다음과 같이 영역 이름을 지정해 grid-template-areas에서 참조할 수 있다.
1
2
3
4
5
6
<div class="container">
    <header class="item">HEADER</header>
    <main class="item">MAIN</main>
    <aside class="item">ASIDE</aside>
    <footer class="item">FOOTER</footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
    display: grid;
    grid-template-rows: repeat(4, 90px);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
    "header header header"
    "main main aside"
    "main main ."
    "footer footer footer";
}

header.item { grid-area: header; }
main.item   { grid-area: main;   }
aside.item  { grid-area: aside;  }
footer.item { grid-area: footer; }

grid-area

align-self

단일 그리드 아이템(Item)을 수직(열 축) 정렬한다. 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 한다.

값 의미 기본값
normal stretch와 같다. normal
start 시작점(위쪽) 정렬
center 수직 가운데 정렬
end 끝점(아래쪽) 정렬
stretch 열 축을 채우기 위해 그리드 아이템을 늘림 
1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.item:nth-child(1) { align-self: start; }
.item:nth-child(2) { align-self: center; }
.item:nth-child(3) { align-self: end; }
.item:nth-child(4) { align-self: stretch; }

grid-align-self

justify-self

단일 그리드 아이템(Item)을 수평(행 축) 정렬한다. 그리드 아이템의 가로 너비가 자신이 속한 그리드 열(Track)의 크기보다 작아야 한다.

값 의미 기본값
normal stretch와 같다. normal
start 시작점(왼쪽) 정렬
center 수평 가운데 정렬
end 끝점(오른쪽) 정렬
stretch 행 축을 채우기 위해 그리드 아이템을 늘림 
1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.item:nth-child(1) { justify-self: start; }
.item:nth-child(2) { justify-self: center; }
.item:nth-child(3) { justify-self: end; }
.item:nth-child(4) { justify-self: stretch; }

grid-justify-self

place-self

align-self와 justify-self의 단축 속성이다.

  • 하나의 값만 입력하면 두 속성에 모두 적용된다.
  • Edge(IE) 브라우저에서 지원하지 않는 속성
1
2
3
.item {
  place-self: <align-self> <justify-self>;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 01 */
.item {
  place-self: start end;
}
.item {
  align-self: start;
  justify-self: end;
}

/* 02 */
.item {
    place-self: center;
}
.item {
    align-self: center;
    justify-self: center;
}

order

그리드 아이템이 자동 배치되는 순서를 변경할 수 있다. 숫자가 작을수록 앞서 배치된다.

1
2
3
4
5
6
7
8
.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) { order: 1; }
.item:nth-child(3) { order: 5; }
.item:nth-child(5) { order: -1; }

grid-order

z-index

z-index 속성을 이용해 아이템이 쌓이는 순서를 변경할 수 있다.

1
2
3
4
5
6
7
8
9
10
.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
.item:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
  z-index: 1;
}
.item:nth-child(3) {
  grid-area: 2 / 2 / 3 / 4;
}

grid-zindex

Grid Functions

repeat

  • repeat() 함수는 행/열(Track)의 크기 정의를 반복한다.
  • ‘반복되는 횟수’와 ‘행/열의 크기 정의’를 인수로 사용한다.
  • grid-template-rows와 grid-template-columns에서 사용한다.
1
2
3
4
5
6
7
/* 9컬럼 그리드 */
.container {
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;
}
.container {
  grid-template-columns: repeat(9, 100px);
}
1
2
3
4
5
6
7
8
9
10
11
.container {
  grid-template-rows: [row-start] 200px [row-end row-start] 200px [row-end];
  grid-template-columns: [col-start] 100px [col-end col-start] 100px [col-end col-start] 100px [col-end];
}
.container {
  grid-template-rows: repeat(2, [row-start] 200px [row-end]);
  grid-template-columns: repeat(3, [col-start] 100px [col-end]);
}
.container {
  grid-template: repeat(2, [row-start] 200px [row-end]) / repeat(3, [col-start] 100px [col-end]);
}
1
2
3
4
5
6
7
.container {
    /* 12컬럼 그리드 */
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr;
}
.container {
    grid-template-columns: repeat(6, 1fr 2fr);
}

minmax

  • minmax() 함수는 행/열(Track)의 ‘최소/최대 크기’를 정의한다.
  • 첫 번째 인수는 ‘최솟값’이고 두 번째 인수는 ‘최댓값’이다.
  • grid-template-rows, grid-template-columns, grid-auto-rows 그리고 grid-auto-columns에서 사용한다.
  • 일반 요소에 min-width와 max-width 속성을 동시 지정하는 것과 유사하다.
1
2
3
.container {
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}

grid-minmax

  • minmax()를 통해 암시적 행/열(Track) 크기를 좀 더 유연하게 사용할 수 있다.
1
2
3
4
.container {
  grid-auto-rows: minmax(200px, auto);
  grid-auto-columns: minmax(300px, auto);
}

fit-content

  • fit-content() 함수는 행/열(Track)의 크기를 그리드 아이템(Item)이 포함하는 내용(Contents) 크기에 맞춘다.
  • ‘내용의 최대 크기’를 인수로 사용한다.
  • minmax(auto, max-content)와 유사하다.
1
2
3
.container {
  grid-template-columns: fit-content(300px) fit-content(300px);
}

grid-fit-content

Grid Units

fr

fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미한다.

1
2
3
4
5
/* 3번째 컬럼에 100px, 4번째 컬럼에 25%를 사용하고 */
/* 남은 공간을 1번째 컬럼에 ‘1/3’, 2번째 컬럼에 ‘2/3’ 만큼 사용 */
.container {
  grid-template-columns: 1fr 2fr 100px 25%;
}

grid-fr

min-content

그리드 아이템이 포함하는 내용(Contents)의 최소 크기를 의미한다.

1
2
3
4
<div class="container">
  <div class="item">lorem ipsum</div>
  <!-- ... -->
</div>
1
2
3
.container {
  grid-template-columns: min-content 1fr;
}

grid-min-content

  • 한글을 사용하는 경우 word-break: keep-all;를 설정하면 정상적으로 동작한다.
1
2
3
4
<div class="container">
    <div class="item">내용의 최소 크기</div>
    <!-- ... -->
</div>

grid-min-content

max-content

그리드 아이템이 포함하는 내용(Contents)의 최대 크기를 의미한다.

1
2
3
4
<div class="container">
  <div class="item">Hello HEROPY~</div>
  <!-- ... -->
</div>
1
2
3
.container {
  grid-template-columns: max-content 1fr;
}

grid-max-content

1
2
3
.container {
  grid-template-columns: repeat(4, minmax(max-content, 1fr));
}
  • 그리드 함수들과 같이 더 유용하게 활용할 수 있다.
  • 총 4컬럼 그리드를 생성하며 각 열(Track)은 최대 1fr 크기를 가지지만, max-content를 통해 포함된 그리드 아이템의 내용보다 작아질 수 없다.
1
2
3
.container {
  grid-template-columns: repeat(4, minmax(max-content, 1fr));
}

auto-fill, auto-fit

행/열(Track)의 개수를 그리드 컨테이너(Container) 및 행/열 크기에 맞게 자동으로(암시적) 조정한다.
repeat() 함수와 같이 사용하며, 행/열과 아이템(Item) 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용하다. (반응형 그리드)
auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작한다.

예제01

  • 다음 4컬럼 그리드 예제에서 컨테이너의 크기가 아이템들을 수용하기 충분하지 않은 경우 아이템은 넘치기 시작한다.
  • 아이템의 최소 크기가 120px이다.
1
2
3
.container {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

grid-fill-fit

예제02

  • 만약 4컬럼 그리드를 고집할 필요가 없다면, 다음과 같이 ‘반복횟수’(repeat() 함수의 첫 번째 인수)를 auto-fill이나 auto-fit으로 수정할 수 있다.
  • 컨테이너의 크기가 아이템들을 수용하기 충분하지 않을 경우 아이템을 자동으로 줄 바꿈 처리하며, 그에 맞게 암시적 행/열도 자동으로 수정한다.
1
2
3
.container {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

grid-fill-fit

auto-fill과 auto-fit의 차이

  • auto-fill과 auto-fit은 차이점은 그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생한다.
  • auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소한다.
1
2
3
4
5
6
.container.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.container.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

grid-fill-fit

주요 용어 정리

Track

트랙(Track)은 하나의 행(Row) 혹은 열(Column)을 의미한다.

grid-fill-fit

Line

선(Line)은 일반적으로 거터(Gutter)라고 하는 트랙과 트랙 사이의 간격을 의미한다.

grid-fill-fit

Cell, Area

  • 셀(Cell)은 아이템(Item)이 배치되는 최소 단위의 영역(Area)이다.
  • 영역(Area)은 아이템이 배치되는, 하나 이상의 셀(Cell)로 이루어진 영역이다.

grid-fill-fit

REFERENCE
https://heropy.blog/2019/08/17/css-grid/

  • © 2020-2025 404 Not Found
  • Powered by Hexo Theme Ayer