Ch.6 CSS Grid + 반응형 디자인
Grid — 2차원 레이아웃
display: grid의 역할과 Flexbox와의 차이를 이해한다grid-template-columns/rows로 행·열을 정의할 수 있다fr 단위와 gap 속성을 활용할 수 있다
Flexbox가 1차원이라면 Grid는 2차원입니다
Flexbox는 한 줄(가로 또는 세로)을 다루지만, 행과 열을 동시에 제어하려면 CSS Grid가 필요합니다. 엑셀처럼 격자를 만듭니다.
행과 열을 동시에 설계하려면?
CSS Grid — 2차원 격자 레이아웃을 코드 몇 줄로 완성합니다.
article
핵심 내용
행(row)과 열(column)을 동시에 정의합니다
fr 단위와 repeat() 함수로 격자를 간결하게 정의합니다
.grid {
display: grid;
/* 3열 균등 분배 (fr = fraction 비율 단위) */
grid-template-columns: 1fr 1fr 1fr;
/* 위와 동일한 단축 표기 */
grid-template-columns: repeat(3, 1fr);
/* 고정 + 유동 혼합 */
grid-template-columns: 250px 1fr 1fr;
/* 행 높이 */
grid-template-rows: auto 200px;
/* 간격 */
gap: 16px;
}fr 단위: 남는 공간을 비율로 나눈다 (fraction) • `1fr 1fr 1fr` = 3등분 • `1fr 2fr` = 1:2 비율 • `250px 1fr` = 왼쪽 고정, 나머지 전부
Grid로 3열 카드 레이아웃을 만들어봅시다
CSS Grid에서 3개의 균등한 열을 만드는 올바른 코드는?
Grid에서 남는 공간을 비율로 나누는 단위는 ___ 이다
CSS Grid에서 행과 열을 동시에 정의할 수 있다
CSS Grid 입문!
key
핵심 용어
🏗️
Grid Container
display: grid를 선언한 부모
🧩
Grid Item
컨테이너의 직계 자식 요소
📏
Grid Line
행/열을 나누는 보이지 않는 선
⬜
Grid Cell
하나의 행×열 칸
compare_arrows
비교 정리
| 항목 | Flexbox (1차원) | Grid (2차원) |
|---|---|---|
| 배치 방향 | 한 방향(행 또는 열)만 제어 | 행과 열을 동시에 제어 |
| 배치 방식 | 콘텐츠 크기에 따라 유연하게 배치 | 격자 구조를 먼저 정의하고 배치 |
| 적합한 용도 | 내비게이션, 카드 행, 정렬에 적합 | 전체 페이지 레이아웃, 갤러리에 적합 |
edit_note
정리 노트
Grid — 2차원 레이아웃
Grid 기본
- display: grid
- 2차원 레이아웃 시스템 활성화
- grid-template-columns
- 열 개수와 너비 정의
- grid-template-rows
- 행 높이 정의
- gap
- 그리드 아이템 사이의 간격
유용한 단위
- fr
- 남은 공간의 비율 단위 — 1fr 2fr = 1:2 비율
- repeat()
- 반복 패턴 축약 — repeat(3, 1fr) = 1fr 1fr 1fr
★
Flexbox는 1차원(가로 또는 세로), Grid는 2차원(가로 + 세로)에 적합합니다.
image
시각 자료
다이어그램: wd-scene-grid-layout
check_circle
핵심 정리
- 1display: grid → 2차원(행+열) 레이아웃
- 2grid-template-columns: repeat(3, 1fr) → 3열 균등 분배
- 3fr 단위 = 남는 공간을 비율로 나누는 Grid 전용 단위
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 레슨 시작