CSS Grid 레이아웃 예제

1. 기본 Grid 컨테이너

display: grid와 grid-template-columns으로 열을 정의합니다.

1
2
3
4
5
6

2. grid-template-columns

고정 크기: 100px 200px 100px

1
2
3

비율: 1fr 2fr 1fr

1fr
2fr
1fr

repeat(4, 1fr)

1
2
3
4

minmax(100px, 1fr)

1
2
3

auto-fill vs auto-fit

창 크기를 조절해보세요.

auto-fill: 빈 공간 유지

1
2
3

auto-fit: 빈 공간 채움

1
2
3

3. grid-template-rows

100px
200px
100px

4. gap (간격)

gap: 20px

1
2
3
4

row-gap: 30px, column-gap: 10px

1
2
3
4

5. 아이템 배치: grid-column, grid-row

col: 1 / 3 (2칸)
3
row: 2 / 4 (2칸)
5
6
2x2

6. grid-template-areas

영역 이름을 사용하여 직관적으로 레이아웃을 정의합니다.

Header
Main Content

7. justify-items, align-items

justify-items: center, align-items: center

1
2
3
4

justify-items: stretch (기본값)

1
2
3
4

8. justify-content, align-content

Grid 컨테이너 내에서 전체 그리드의 위치를 조정합니다.

1
2
3
4

9. justify-self, align-self (개별 정렬)

start
center
end
top
middle
bottom

10. 실전 예제: 이미지 갤러리

1 (large)
2
3
4 (tall)
5
6 (wide)
7
8

11. 실전 예제: 대시보드 레이아웃

Header
Widget 1
Widget 2
Widget 3
Widget 4 (wide)

12. 반응형 Grid

창 크기를 조절하면 열 수가 자동으로 변경됩니다.

1
2
3
4
5
6
7
8