이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

• ▸✅ grid-template-columns: repeat(auto-fit, minmax()) 패턴
• ▸✅ grid-area + named line 으로 12-col 레이아웃
• ▸✅ Flex 와 Grid 의 언제 무엇을 쓸지

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

핵심 한 줄

CSS Grid = 행과 열 (2차원) 로 레이아웃을 구성하는 도구. Flexbox 가 한 줄 정렬이라면, Grid 는 바둑판 같은 격자 구조.

언제 Grid 쓰나

• ▸카드 그리드 (3열 4행)
• ▸페이지 전체 레이아웃 (헤더·사이드·메인·푸터)
• ▸잡지·신문 같은 복잡한 레이아웃
• ▸표 (table 보다 flexible)

한 줄 정렬은 Flexbox, 2차원은 Grid. 둘이 공존 합니다.

기본 사용

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;   /* 3열, 동일 너비 */
    gap: 16px;
}

<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

3열 그리드, 2행으로 자동 배치.

fr — Fractional Unit

grid-template-columns: 1fr 2fr 1fr;
/* 1:2:1 비율 — 가운데가 2배 */

fr = 남은 공간의 1 단위. 픽셀이 아닌 비율. 화면 크기 변화에도 비율 유지.

repeat — 반복 단축

grid-template-columns: repeat(4, 1fr);
/* = 1fr 1fr 1fr 1fr */

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 최소 200px, 가능한 만큼 자동 배치 */

auto-fill + minmax 가 반응형 그리드의 마법 — 화면 너비에 따라 알아서 1열·2열·3열... 조정.

영역 이름 지정

.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: 60px 1fr 60px;
}

header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

레이아웃이 눈에 그려집니다. 페이지 전체 구조에 압도적으로 좋음.

Grid 항목 단독 배치

.featured {
    grid-column: 1 / 4;     /* 1번 라인 ~ 4번 라인 (3칸 차지) */
    grid-row: 1 / 3;        /* 1번 라인 ~ 3번 라인 (2행 차지) */
}

특정 카드를 더 크게 만들 때. 이런 불규칙 레이아웃 은 Flexbox 로 어렵습니다.

Flexbox vs Grid

대부분 둘 다 함께 씁니다. 큰 레이아웃은 Grid, 그 안의 작은 컴포넌트는 Flexbox.

한 번 정리

• ▸display: grid + grid-template-columns + gap 로 시작
• ▸repeat(auto-fill, minmax(200px, 1fr)) = 반응형 카드 그리드
• ▸grid-template-areas 로 페이지 전체 레이아웃
• ▸Flexbox 와 함께 사용

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰 절약의 출발점입니다.

• ▸"이 카드 리스트를 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 로 만들어줘"
• ▸"이 12-column 레이아웃을 CSS Grid 로 변환해줘"
• ▸"이 grid 의 gap, 명시적 area 배치 추가해줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.