Grid 의 mental model: row 와 column

"Grid 는 좌표 시스템. 트랙 정의하면 항목이 셀로 snap. 처음부터 2D 로 생각해."

Grid 어휘

트랙 — row 또는 column. Grid 는 row 트랙과 column 트랙 가짐.
라인 — 트랙 사이 (또는 주위) 경계. 라인은 1 부터 번호.
셀 — 한 row 와 한 column 의 교차. 배치의 가장 작은 단위.
영역 — 셀 하나 이상의 직사각형. 항목이 영역 점유 가능.
항목 — grid 컨테이너의 직접 자식; 셀 하나 이상 점유.

트랙 선언

grid-template-columns 와 grid-template-rows 로 트랙 정의. 리스트의 각 값이 트랙 하나의 크기:

grid-template-columns: 100px 200px 300px — 정확히 그 너비의 column 셋.
grid-template-columns: 1fr 2fr 1fr — 공간을 1:2:1 비율로 공유하는 column 셋. fr 은 "남은 공간의 fractional unit" 의미.
grid-template-columns: 240px 1fr — 고정 사이드바 + 유연 main. 클래식 2 column 앱 셸.
grid-template-columns: repeat(3, 1fr) — 동등 column 셋. repeat(N, value) 가 트랙 정의 N 번 반복.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) — fit 하는 만큼의 200px+ column, 각자 남은 공간 채우게 확장. 반응형 grid 한 줄.

`fr` 단위

fr = fractional. 너가 명시한 비율로 남은 공간 (고정 크기 트랙 차감 후) 분배. 1fr 1fr = 50/50. 2fr 1fr 1fr = 50/25/25. 240px 1fr = 사이드바 240px, main 이 나머지. fr 이 컨테이너의 content 영역에 작동; 고정 크기 트랙이 먼저 빼지고, 그 다음 fr 이 남은 거 나눔.

`minmax()` 함수

minmax(100px, 1fr) = "최소 100px, 최대 1fr". 반응형 grid 의 핵심 — column 이 컨테이너 줄어들어도 읽기 가능하게 유지, 컨테이너 넓을 때 추가 공간 채우게 확장.

`repeat()` 함수

repeat(3, 1fr) — 정확히 동등 트랙 셋.
repeat(auto-fill, 200px) — fit 하는 만큼의 200px 트랙; 트랙이 200px 너비 유지. 빈 트랙이 남음 (공간 예약).
repeat(auto-fit, 200px) — 같지만, 빈 트랙이 collapse 하고 기존 항목이 채우게 확장.
repeat(auto-fit, minmax(200px, 1fr)) — 반응형 grid. 카드가 최소 200px; 컨테이너에 4 개 공간 있으면 4 column; 2 개만 fit 하면 카드가 행 채우게 확장.

auto-fit vs auto-fill: grid 에 트랙 채울 항목이 충분할 때 동일. 항목이 트랙보다 적을 때: auto-fill 이 빈 공간 둠 (grid 모양 보존); auto-fit 이 빈 트랙 collapse 하고 기존 항목을 행 채우게 stretch. 거의 모두가 콘텐츠 카드에 auto-fit 원해.

암묵적 트랙

명시적 grid 가 가진 셀보다 항목이 많으면, Grid 가 추가 row (또는 column) 자동 생성. 이 암묵적 트랙 의 크기는 grid-auto-rows / grid-auto-columns 로 제어. 기본 auto (content 로 크기).

Gap

Grid 컨테이너의 gap: 1rem 이 모든 row 와 모든 column 사이에 1rem 공간. row-gap: 2rem; column-gap: 1rem 이 독립 설정. Flexbox 와 같은 property 이름; 같은 semantic.

항목 배치

항목이 source 순서로 셀에 자동 snap (auto-placement, 다음 레슨이 세부). Override 하려면 grid-column 과 grid-row 써:

grid-column: 1 / 3 — column 라인 1 부터 column 라인 3 까지 span (= 셀 둘).
grid-column: 1 / -1 — 라인 1 부터 마지막 라인까지 span. -1 이 항상 "마지막 명시적 라인" 의미. 다중 column grid 의 풀 너비 header 에 유용.
grid-column: span 2 — auto-placement 가 항목을 놓는 자리에서 2 column span.
grid-area: 2 / 1 / 4 / 3 — row-start / column-start / row-end / column-end. 네 값, 풀 배치.

fr + minmax + auto-fit 이 반응형 grid 삼위일체. grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 가 카드 기반 layout 의 media query 80% 대체. 한 선언, 무한 반응형 행동.

피파의 노트

cwk-quests 카탈로그 페이지가 단일 라인: grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)). 1600px 모니터에서 row 당 quest 카드 5 개 보여 줌; 768px 태블릿에서 2-3; 폰에서 1. Grid 자체용 media query 0. Quest 콘텐츠 페이지가 사이드바 + main + meta layout 에 명명된 영역 (다음 레슨) 사용. 두 패턴, dozens 의 페이지.

Code

사용의 80% 커버하는 세 grid 패턴·css

/* 미니멀 grid */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 동등 column 셋 */
  gap: 1rem;
}
/* grid-template-rows 없음: row 가 암묵적, content 로 크기 */

/* 2 column 앱 셸 — 고정 사이드바 + 유연 main */
.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* 반응형 카드 grid — 가장 많이 복사된 grid 한 줄 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
/* 카드 최소 240px 너비; 컨테이너가 허용하는 만큼 row 당 fit;
   더 적게 fit 하면 행 채우게 자람. Media query 0. */

라인 번호와 span 으로 배치·css

/* 항목 명시적 배치 */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}

.header {
  grid-column: 1 / -1;       /* 풀 너비: 라인 1 부터 마지막 라인 */
  grid-row: 1;                /* 첫 row */
}

.sidebar {
  grid-column: 1 / 2;        /* 첫 column */
  grid-row: 2 / 3;            /* 두 번째 row */
}

.main {
  grid-column: 2 / -1;       /* column 2 부터 끝 */
  grid-row: 2 / 3;
}

.footer {
  grid-column: 1 / -1;       /* 풀 너비 */
  grid-row: 3;                /* 세 번째 row */
}

/* 배치 약자: grid-area: row-start / col-start / row-end / col-end */
.featured-card {
  grid-area: 1 / 1 / 3 / 3;  /* row 1-2, column 1-2 span (2x2 영역) */
}

/* Span 문법 */
.tall-card {
  grid-row: span 2;          /* row 둘 가짐 */
}

대시보드 + 매거진 — fr/minmax/repeat 작동·css

/* fr, minmax, repeat 결합 */

/* 사이드바, 2 column 콘텐츠 가진 대시보드, media query 없음 */
.dashboard {
  display: grid;
  grid-template-columns:
    minmax(200px, 240px)              /* 사이드바: 200 과 240 사이 */
    repeat(auto-fit, minmax(280px, 1fr)); /* 타일: 반응형 */
  gap: 1.5rem;
  padding: 1.5rem;
}

/* 매거진 스타일 layout */
.magazine {
  display: grid;
  grid-template-columns: repeat(12, 1fr);  /* Bootstrap 같은 12 column grid */
  gap: 1rem;
}
.magazine .lead { grid-column: 1 / 8; }    /* 7 column lead article */
.magazine .aside { grid-column: 8 / 13; }  /* 5 column aside */
.magazine .footer { grid-column: 1 / -1; } /* 풀 너비 footer */

Exercise

Layout 셋 짓기: (1) grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) 와 최소 카드 8 개 가진 반응형 카드 grid — 윈도우 리사이즈하고 column 이 reflow 되는 거 봐; (2) 240px 사이드바와 유연 main 가진 2 column 앱 셸, 양 column span 하는 풀 너비 header; (3) lead article 이 7 column 너비고 aside 가 5 column 인 12 column 매거진 grid. DevTools grid overlay 로 각자 검사.

Hint

#1 은 리사이즈하면서 column 세 봐: 1200px 에서 몇 개 fit? 800px? 400px? 수학이 (container_width + gap) / (column_min + gap) 내림. 수학 보면 layout 이 덜 마법적으로 느껴짐.

Grid 어휘

트랙 선언

`fr` 단위

`minmax()` 함수

`repeat()` 함수

암묵적 트랙

Gap

항목 배치

피파의 노트

Code

External links

Exercise

Progress

댓글 0

Grid 어휘

트랙 선언

fr 단위

minmax() 함수

repeat() 함수

암묵적 트랙

Gap

항목 배치

피파의 노트

Code

External links

Exercise

Progress

`fr` 단위

`minmax()` 함수

`repeat()` 함수