Grid vs Flexbox
| 레이아웃 | 방향 | 특징 |
|---|---|---|
flexbox |
1방향 (가로 행 또는 세로 열) | 단일 축을 기준으로 아이템을 정렬·배분할 때 적합 |
grid |
2방향 (가로 행 과 세로 열) | 행·열을 동시에 제어하는 복잡한 2차원 레이아웃에 적합 |
한 줄 요약: Flexbox = 한 방향, Grid = 두 방향
Grid 기본 용어
| 용어 | 설명 |
|---|---|
| grid line | 격자를 나누는 선. 번호(1, 2, 3…)로 참조하여 아이템 배치에 사용. |
| grid track | 두 라인 사이의 간격. 즉 하나의 행(row) 또는 열(column). |
| grid cell | 격자 한 칸. 행 트랙과 열 트랙이 교차하는 최소 단위. |
| grid area | 여러 cell을 합쳐 아이템이 차지하는 영역. |
Grid 기초 CSS
1) 부모 요소에 display: grid 지정
Grid 레이아웃은 컨테이너(부모)에 display: grid를 선언하는 것에서 시작합니다.
2) 그리드 트랙 지정
| 속성 | 역할 |
|---|---|
grid-template-rows |
세로를 몇 개로 분할할지 — 셀의 높이 지정 |
grid-template-columns |
가로를 몇 개로 분할할지 — 셀의 너비 지정 |
3열 균등 분할 (auto)
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #f7ef7e;
padding: 3px;
}
포토갤러리 (vw, %)
.photoGallery {
display: grid;
grid-template-rows: 40vw 30vw 30vw 40vw 40vw;
grid-template-columns: 50% 50%;
}
단위 팁:
auto — 남은 공간을 균등 분배vw — viewport 너비의 % (뷰포트 기준 반응형 높이에 유용)% — 컨테이너 기준 백분율
Grid 아이템 배치
Grid 아이템(자식 요소)이 몇 번 라인부터 몇 번 라인까지 차지할지 지정합니다.
방법 1 — start/end 개별 지정
.item01 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}
방법 2 — 슬래시(/) 단축 표기
.item02 {
grid-row: 2/4;
grid-column: 1/2;
}
| 속성 | 의미 | 예시 |
|---|---|---|
grid-row-start |
아이템이 시작하는 행 라인 번호 | 1 |
grid-row-end |
아이템이 끝나는 행 라인 번호 | 2 |
grid-column-start |
아이템이 시작하는 열 라인 번호 | 1 |
grid-column-end |
아이템이 끝나는 열 라인 번호 | 3 |
grid-row: S/E |
start/end 단축 표기 | 2/4 → 라인 2~4 |
grid-column: S/E |
start/end 단축 표기 | 1/3 → 라인 1~3 (2칸) |
라인 번호 읽는 법: 2열 그리드의 라인은 1·2·3 (열이 2개면 라인은 3개).
grid-column: 1/3 = 라인 1부터 라인 3까지 = 2칸 전체 차지.
실습 예제 — 포토갤러리
7개의 이미지를 A~G 위치에 배치하는 5행 2열 그리드 예제입니다.
/* 컨테이너: 5행 2열 */
.photoGallery {
display: grid;
grid-template-rows: 40vw 30vw 30vw 40vw 40vw;
grid-template-columns: 50% 50%;
}
/* A: 1행 전체(2칸) */
.item01 { grid-row: 1/2; grid-column: 1/3; }
/* B: 2~3행, 왼쪽 */
.item02 { grid-row: 2/4; grid-column: 1/2; }
/* C: 2행, 오른쪽 */
.item03 { grid-row: 2/3; grid-column: 2/3; }
/* D: 3행, 오른쪽 */
.item04 { grid-row: 3/4; grid-column: 2/3; }
/* E: 4행 전체(2칸) */
.item05 { grid-row: 4/5; grid-column: 1/3; }
/* F: 5행, 왼쪽 */
.item06 { grid-row: 5/6; grid-column: 1/2; }
/* G: 5행, 오른쪽 */
.item07 { grid-row: 5/6; grid-column: 2/3; }
이미지 채우기: 셀 크기에 맞게 이미지를 꽉 채우려면
width: 100%; height: 100%; object-fit: cover;object-fit: cover — 비율 유지하며 영역을 빈틈없이 채움 (이미지 일부 잘릴 수 있음).