AAtomic CSS

grid-template-columns

그리드 컨테이너의 열 구조를 정의하는 가장 강력한 그리드 속성입니다. 반드시 dg(display: grid)와 함께 사용하며, 하이픈(-)이 CSS의 공백 구분자 역할을 합니다. 프리픽스는 gtc입니다.

패턴 목록

gtc는 다양한 패턴을 지원합니다. 하이픈(-)은 CSS에서 값 사이의 공백을 의미합니다.

패턴클래스 예시CSS 출력설명
gtcngtcngrid-template-columns: none그리드 열 정의 제거
gtc{vals}gtc1fr-2fr-1frgrid-template-columns: 1fr 2fr 1fr직접 값 지정. 하이픈 = 공백
gtc{vals}gtc200px-1frgrid-template-columns: 200px 1fr고정 + 유동 조합
gtcr{N}-{val}gtcr3-1frgrid-template-columns: repeat(3, 1fr)N번 반복
gtcrfit-minmax{min}-{max}gtcrfit-minmax28rem-1frgrid-template-columns: repeat(auto-fit, minmax(28rem, 1fr))auto-fit 반응형
gtcrfill-minmax{min}-{max}gtcrfill-minmax25rem-1frgrid-template-columns: repeat(auto-fill, minmax(25rem, 1fr))auto-fill 반응형
gtcminmax{min}-{max}gtcminmax200px-1frgrid-template-columns: minmax(200px, 1fr)최소/최대 범위
gtccalc{expr}gtccalc100p-200px-1frgrid-template-columns: calc(100% - 200px) 1frcalc 계산식

시각적 비교

자주 사용하는 grid-template-columns 패턴을 시각적으로 비교합니다.

2열 균등 -- dg gtc1fr-1fr gap8px

1fr
1fr

두 열이 동일한 비율로 공간을 나눕니다

3열 균등 -- dg gtcr3-1fr gap8px

1fr
1fr
1fr

repeat(3, 1fr) — 세 열이 균등하게 분배됩니다

사이드바 + 메인 -- dg gtc25rem-1fr gap8px

Sidebar (25rem)
Main (1fr)

사이드바는 고정 너비, 메인은 나머지 공간을 차지합니다

반응형 auto-fit -- dg gtcrfit-minmax20rem-1fr gap8px

Card 1
Card 2
Card 3
Card 4
Card 5

화면 크기에 따라 열 수가 자동 조절됩니다. 브라우저 창을 줄여보세요.

1:2:1 비율 -- dg gtc1fr-2fr-1fr gap8px

1fr
2fr
1fr

가운데 열이 2배 넓습니다. 대시보드, Holy Grail 변형에 활용

패턴별 상세

gtc{values}직접 값 지정

하이픈으로 구분된 값이 그대로 grid-template-columns의 값이 됩니다. 하이픈은 CSS의 공백을 의미합니다. fr, px, rem, auto 등을 자유롭게 조합할 수 있습니다.

<!-- 2열 균등 -->
<div class="dg gtc1fr-1fr gap2rem">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

<!-- 1:2 비율 -->
<div class="dg gtc1fr-2fr gap2rem">
  <aside>Sidebar (1fr)</aside>
  <main>Content (2fr)</main>
</div>

<!-- 고정 + 유동 -->
<div class="dg gtc200px-1fr gap2rem">
  <nav>Nav (200px)</nav>
  <main>Content (나머지 전부)</main>
</div>

<!-- 사이드바 레이아웃 -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside>Sidebar (25rem = 250px)</aside>
  <main>Main Content</main>
</div>

<!-- 3열 비율 -->
<div class="dg gtc1fr-2fr-1fr gap2rem">
  <aside>Left</aside>
  <main>Center (2배 넓음)</main>
  <aside>Right</aside>
</div>

주요 직접 값 클래스

클래스CSS용도
gtc1fr-1fr1fr 1fr2열 균등 분배
gtc1fr-2fr1fr 2fr1:2 비율 (사이드바:메인)
gtc1fr-2fr-1fr1fr 2fr 1fr1:2:1 비율 (대시보드)
gtc200px-1fr200px 1fr고정 200px + 나머지
gtc25rem-1fr25rem 1fr사이드바 25rem + 나머지
gtc300px-1fr300px 1fr넓은 사이드바 + 나머지
gtc20rem-1fr-20rem20rem 1fr 20remHoly Grail 레이아웃

2열 균등 -- gtc1fr-1fr

1fr
1fr

1:2 비율 -- gtc1fr-2fr

1fr
2fr

고정 + 유동 -- gtc200px-1fr

200px
1fr (나머지)

1:2:1 비율 -- gtc1fr-2fr-1fr

1fr
2fr
1fr

gtcr{N}-{val}repeat(N, val)

동일한 열을 N번 반복합니다. gtcr 뒤에 반복 횟수, 하이픈, 값을 씁니다. 균등한 열 그리드를 만드는 가장 간결한 방법입니다.

<!-- 3열 균등 그리드 -->
<div class="dg gtcr3-1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- 4열 균등 그리드 -->
<div class="dg gtcr4-1fr gap2rem">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

<!-- 6열 균등 (아이콘, 썸네일) -->
<div class="dg gtcr6-1fr gap16px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

반복 횟수별 비교

2열 -- gtcr2-1fr

1
2

3열 -- gtcr3-1fr

1
2
3

4열 -- gtcr4-1fr

1
2
3
4

6열 -- gtcr6-1fr

1
2
3
4
5
6

gtcrfit-minmax{min}-{max}repeat(auto-fit, minmax(min, max))

가장 중요한 반응형 패턴입니다. 컨테이너 너비에 따라 열 수가 자동으로 조절됩니다. 최소 너비를 보장하면서 남은 공간을 균등하게 분배합니다. 미디어 쿼리 없이도 반응형 카드 레이아웃을 만들 수 있습니다.

<!-- 반응형 카드 그리드 (가장 많이 사용!) -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
  <div class="bg18181B p2rem br8px">Card 4</div>
</div>
<!-- 최소 28rem(280px) 보장, 공간이 있으면 여러 열로 배치 -->
<!-- 공간이 부족하면 자동으로 열 수가 줄어듦 -->

<!-- 작은 카드 (최소 20rem) -->
<div class="dg gtcrfit-minmax20rem-1fr gap16px">
  <div>Compact 1</div>
  <div>Compact 2</div>
  <div>Compact 3</div>
  <div>Compact 4</div>
  <div>Compact 5</div>
  <div>Compact 6</div>
</div>

핵심 포인트

auto-fit은 빈 트랙을 축소(collapse)합니다. 아이템이 3개이고 공간이 5열분이면, 나머지 2열 공간이 기존 아이템에 분배되어 아이템이 늘어납니다. 카드 그리드에 가장 적합한 패턴입니다.

최소 너비별 비교

최소 20rem (200px) -- gtcrfit-minmax20rem-1fr

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

최소 28rem (280px) -- gtcrfit-minmax28rem-1fr

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

브라우저 창 크기를 조절해 보세요. 열 수가 자동으로 변경됩니다.

gtcrfill-minmax{min}-{max}repeat(auto-fill, minmax(min, max))

auto-fit과 유사하지만, 빈 트랙을 축소하지 않고 유지합니다. 아이템 수가 적어도 열 크기가 최대값까지 늘어나지 않고 최소 크기를 유지합니다.

<!-- auto-fill: 빈 트랙 유지 -->
<div class="dg gtcrfill-minmax25rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Item 1</div>
  <div class="bg18181B p2rem br8px">Item 2</div>
</div>
<!-- 아이템이 2개뿐이어도 최소 25rem 크기를 유지 -->
<!-- auto-fit이었다면 아이템이 전체 너비로 늘어남 -->

auto-fill -- gtcrfill-minmax25rem-1fr

Card 1
Card 2

아이템이 2개뿐이지만, 빈 트랙이 유지되어 아이템이 늘어나지 않습니다

auto-fit vs auto-fill 비교

두 키워드의 차이는 아이템이 트랙을 다 채우지 못할 때 나타납니다. 같은 아이템 수(2개)로 비교해 봅니다.

auto-fit -- gtcrfit-minmax20rem-1fr

Item 1
Item 2

빈 트랙이 축소되어 아이템이 늘어남

auto-fill -- gtcrfill-minmax20rem-1fr

Item 1
Item 2

빈 트랙이 유지되어 아이템 크기 고정

auto-fitauto-fill
빈 트랙 처리축소 (collapse) — 공간이 아이템에 분배됨유지 — 빈 공간이 그대로 남음
아이템 늘어남공간이 남으면 아이템이 늘어남아이템은 최소 크기 유지
주요 용도카드 그리드 (아이템이 꽉 차 보이길 원할 때)고정 크기 셀 (갤러리, 썸네일)
프리픽스gtcrfit-minmax{min}-{max}gtcrfill-minmax{min}-{max}

gtcminmax{min}-{max}minmax(min, max)

열의 최소/최대 크기 범위를 지정합니다. repeat 없이 단독으로 사용하거나, 다른 값과 조합하여 유연한 열 크기를 만듭니다.

<!-- 최소 200px, 최대 1fr -->
<div class="dg gtcminmax200px-1fr gap2rem">
  <div>유연한 열</div>
</div>

<!-- 최소 200px, 최대 400px 고정 범위 -->
<div class="dg gtcminmax200px-400px gap2rem">
  <div>범위 제한 열</div>
</div>

minmax(200px, 1fr) -- gtcminmax200px-1fr

최소 200px, 최대 1fr

minmax(200px, 400px) -- gtcminmax200px-400px

최소 200px, 최대 400px

gtccalc{expr}calc() 표현식

calc()를 사용하여 계산된 값으로 열 크기를 지정합니다. 퍼센트와 고정 값을 조합할 때 유용합니다.

<!-- calc(100% - 200px)과 1fr 조합 -->
<div class="dg gtccalc100p-200px-1fr gap2rem">
  <div>calc(100% - 200px)</div>
  <div>1fr</div>
</div>

calc(100% - 200px) + 1fr -- gtccalc100p-200px-1fr

calc(100% - 200px)
1fr

반응형 그리드

미디어 쿼리 프리픽스를 조합하여 화면 크기별로 열 구조를 변경할 수 있습니다. 가장 대표적인 패턴은 3열 -> 2열 -> 1열 전환입니다.

<!-- 3열 → 2열 → 1열 전환 (가장 흔한 패턴) -->
<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
  <div>Card 5</div>
  <div>Card 6</div>
</div>

<!-- 사이드바 → 모바일에서 단일 열 -->
<div class="dg gtc25rem-1fr md-gtc1fr gap2rem">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

<!-- Holy Grail → 모바일에서 단일 열 -->
<div class="dg gtc20rem-1fr-20rem md-gtc1fr gap2rem">
  <aside>Left</aside>
  <main>Center</main>
  <aside>Right</aside>
</div>

<!-- auto-fit은 미디어 쿼리 없이도 반응형! -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div>자동 반응형 1</div>
  <div>자동 반응형 2</div>
  <div>자동 반응형 3</div>
</div>

반응형 전환 예시

3열 -> 2열 -> 1열 -- gtcr3-1fr md-gtcr2-1fr sm-gtc1fr

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

브라우저 창 크기를 조절해 열 수 변화를 확인하세요

클래스 조합동작
dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr3열 -> 1024px 이하 2열 -> 768px 이하 1열
dg gtcr4-1fr md-gtcr2-1fr sm-gtc1fr4열 -> 1024px 이하 2열 -> 768px 이하 1열
dg gtc25rem-1fr md-gtc1fr사이드바 레이아웃 -> 1024px 이하 단일 열
dg gtcrfit-minmax28rem-1frauto-fit으로 미디어 쿼리 없이 반응형
dg gtc20rem-1fr-20rem md-gtc1frHoly Grail -> 1024px 이하 단일 열

실전 레이아웃

grid-template-columns로 구현하는 대표적인 레이아웃 패턴입니다.

사이드바 레이아웃 -- gtc25rem-1fr

Sidebar (25rem)
Main Content (1fr)

Holy Grail -- gtc20rem-1fr-20rem

Left (20rem)
Main (1fr)
Right (20rem)

반응형 카드 그리드 -- gtcrfit-minmax28rem-1fr

Card Title

카드 설명 텍스트

Card Title

카드 설명 텍스트

Card Title

카드 설명 텍스트

Card Title

카드 설명 텍스트

대시보드 레이아웃 -- gtc1fr-2fr-1fr

Stats
Main Chart (2fr)
Activity
<!-- 사이드바 레이아웃 -->
<div class="dg gtc25rem-1fr gap2rem sm-gtc1fr">
  <aside>Sidebar</aside>
  <main>Main Content</main>
</div>

<!-- Holy Grail (3열) -->
<div class="dg gtc20rem-1fr-20rem gap2rem md-gtc1fr">
  <aside>Left Sidebar</aside>
  <main>Main Content</main>
  <aside>Right Sidebar</aside>
</div>

<!-- 반응형 카드 그리드 -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
  <div class="bg18181B p2rem br8px">Card 4</div>
</div>

<!-- 대시보드 (1:2:1 비율) -->
<div class="dg gtc1fr-2fr-1fr gap2rem sm-gtc1fr">
  <div>Stats Panel</div>
  <div>Main Chart</div>
  <div>Activity Feed</div>
</div>

팁 & 주의사항

반드시 dg와 함께 사용

gtc 클래스는 dg(display: grid) 없이는 동작하지 않습니다. 항상 dg gtcr3-1fr처럼 함께 사용하세요.

하이픈 = CSS 공백

클래스명의 하이픈(-)은 CSS에서 값 사이의 공백이 됩니다. gtc1fr-2fr-1fr = 1fr 2fr 1fr. 소수점에서도 하이픈을 사용합니다: gtc1-5fr-2fr = 1.5fr 2fr.

auto-fit이 기본 반응형 패턴

반응형 카드 그리드를 만들 때는 gtcrfit-minmax28rem-1fr을 먼저 고려하세요. 미디어 쿼리 없이도 자연스러운 반응형이 됩니다. auto-fill은 빈 공간을 유지해야 할 때만 사용합니다.

gap과 함께 사용

그리드 아이템 사이 간격은 gap 클래스로 지정합니다. 예: dg gtcr3-1fr gap2rem. margin 대신 gap을 사용하면 첫/마지막 아이템에 불필요한 여백이 생기지 않습니다.

반응형은 큰 화면 -> 작은 화면 순서

기본값(데스크탑)을 먼저 쓰고, md-, sm- 프리픽스로 작은 화면을 오버라이드합니다. 예: dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr

grid-template-rowsgapdisplay반응형 디자인