AAtomic CSS

grid-template-rows

그리드 컨테이너의 행(row) 구조를 정의합니다. dg와 함께 사용하며, 헤더-메인-푸터 같은 수직 레이아웃의 핵심 속성입니다.

클래스 목록

패턴CSS설명
gtrngrid-template-rows: none그리드 행 정의 제거
gtr{vals}grid-template-rows: {vals}하이픈으로 구분하여 각 행 크기를 직접 지정
gtrauto-1fr-autogrid-template-rows: auto 1fr auto헤더-메인-푸터 패턴 (가장 많이 사용)
gtr1fr-2frgrid-template-rows: 1fr 2fr1:2 비율로 두 행 분배
gtr100px-1frgrid-template-rows: 100px 1fr고정 높이 + 나머지 공간
gtrr{N}-{val}grid-template-rows: repeat(N, val)동일 크기 행을 N번 반복
gtrr3-1frgrid-template-rows: repeat(3, 1fr)3행 균등 분배
gtrr4-autogrid-template-rows: repeat(4, auto)4행, 각각 내용에 맞는 높이

시각적 비교

각 grid-template-rows 값이 행 높이에 미치는 영향을 비교합니다.

auto 1fr auto (풀 높이) — gtrauto-1fr-auto

Header (auto)
Main Content (1fr)
Footer (auto)

헤더와 푸터는 내용 크기, 메인은 남은 공간을 모두 차지

1fr 2fr (비율) — gtr1fr-2fr

1fr (1/3)
2fr (2/3)

1:2 비율로 공간을 분배

repeat(3, 1fr) 균등 — gtrr3-1fr

Row 1
Row 2
Row 3

3행이 동일한 높이로 분배됨

auto auto 1fr — gtrauto-auto-1fr

Title (auto)
Subtitle (auto)
Content (1fr)

여러 auto 행 + 나머지 공간

언제 뭘 쓸까?

상황추천이유
헤더-메인-푸터 레이아웃gtrauto-1fr-auto가장 대표적인 풀 높이 패턴
고정 높이 헤더 + 콘텐츠gtr6rem-1fr헤더 높이를 정확히 제어
동일 높이 행 반복gtrr3-1fr균등한 행 분배
비율 기반 레이아웃gtr1fr-2frfr 단위로 유연한 비율 지정
내용에 맞는 높이gtrautoauto로 콘텐츠 크기에 자동 맞춤

패턴별 상세

gtr{vals}grid-template-rows: {vals}

하이픈(-)으로 구분하여 각 행의 크기를 직접 지정합니다. auto, fr, px, rem 등 모든 단위를 조합할 수 있습니다.

<!-- 헤더-메인-푸터 (가장 대표적!) -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header class="p2rem bg18181B">헤더</header>
  <main class="p2rem">메인 콘텐츠</main>
  <footer class="p2rem bg18181B">푸터</footer>
</div>

<!-- 2행 비율 분배 -->
<div class="dg gtr1fr-2fr gap16px h40rem">
  <div class="bg18181B p2rem br8px">상단 (1/3)</div>
  <div class="bg27272A p2rem br8px">하단 (2/3)</div>
</div>

<!-- 고정 높이 + 유동 -->
<div class="dg gtr6rem-1fr-auto h100vh">
  <header class="bg18181B p16px">60px 고정 헤더</header>
  <main class="p2rem">나머지 공간</main>
  <footer class="bg18181B p16px">auto 푸터</footer>
</div>

자주 쓰는 값

gtrauto-1fr-autoauto 1fr auto헤더-메인-푸터 (sticky footer)
gtr1fr-2fr1fr 2fr1:2 비율 2행
gtr1fr-1fr1fr 1fr균등 2행
gtrauto-1frauto 1fr내용 높이 + 나머지
gtr6rem-1fr-auto6rem 1fr auto고정 헤더 + 유동 메인 + auto 푸터
gtrauto-auto-1frauto auto 1fr여러 auto 영역 + 나머지

gtrr{N}-{val}grid-template-rows: repeat(N, val)

동일한 크기의 행을 N번 반복합니다. gtcr의 행 버전입니다.

<!-- 3행 균등 분배 -->
<div class="dg gtrr3-1fr gap16px h30rem">
  <div class="bg18181B p2rem br8px">Row 1</div>
  <div class="bg27272A p2rem br8px">Row 2</div>
  <div class="bg18181B p2rem br8px">Row 3</div>
</div>

<!-- 4행 auto (내용에 맞는 높이) -->
<div class="dg gtrr4-auto gap8px">
  <div class="bg18181B p16px br8px">짧은 내용</div>
  <div class="bg27272A p16px br8px">조금 더 긴 내용이 들어갑니다</div>
  <div class="bg18181B p16px br8px">내용</div>
  <div class="bg27272A p16px br8px">마지막 행</div>
</div>

자주 쓰는 값

gtrr2-1frrepeat(2, 1fr)2행 균등
gtrr3-1frrepeat(3, 1fr)3행 균등
gtrr4-1frrepeat(4, 1fr)4행 균등
gtrr3-autorepeat(3, auto)3행, 내용에 맞는 높이
gtrr2-10remrepeat(2, 10rem)2행, 각 100px 고정

풀 높이 레이아웃 패턴

gtrauto-1fr-auto는 가장 많이 사용되는 grid-template-rows 패턴입니다. 헤더와 푸터는 내용에 맞게, 메인 영역은 남은 공간을 모두 차지합니다.

<!-- 기본 풀 높이 레이아웃 -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header class="df jcsb aic px2rem py16px bg18181B">
    <div>Logo</div>
    <nav class="df gap2rem">
      <a href="#">Home</a>
      <a href="#">About</a>
    </nav>
  </header>
  <main class="p2rem oya">
    <!-- 콘텐츠가 짧아도 푸터는 아래에 고정 -->
    <p>메인 콘텐츠</p>
  </main>
  <footer class="df jcc aic py16px bg18181B">
    <p>© 2026 Company</p>
  </footer>
</div>

<!-- 사이드바 포함 풀 높이 레이아웃 -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header class="p16px bg18181B">헤더</header>
  <div class="dg gtc25rem-1fr">
    <aside class="p2rem bg18181B oya">사이드바</aside>
    <main class="p2rem oya">메인</main>
  </div>
  <footer class="p16px bg18181B">푸터</footer>
</div>

핵심 포인트

h100vh와 함께 사용해야 전체 화면 높이를 채웁니다. 1fr이 남은 공간을 모두 가져가므로 메인 콘텐츠가 짧아도 푸터가 아래에 고정됩니다.

반응형 사용

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 행 구조를 변경할 수 있습니다.

<!-- 데스크탑: 3행 → 모바일: auto -->
<div class="dg gtrr3-1fr sm-gtrauto h100vh sm-ha">
  <div>영역 1</div>
  <div>영역 2</div>
  <div>영역 3</div>
</div>

<!-- 풀 높이 → 모바일에서 자연스러운 흐름 -->
<div class="dg gtrauto-1fr-auto h100vh sm-ha sm-gtrauto">
  <header>헤더</header>
  <main>메인</main>
  <footer>푸터</footer>
</div>
클래스 조합동작
gtrauto-1fr-auto sm-gtrauto기본 풀 높이 → 768px 이하에서 auto 높이
gtrr3-1fr md-gtrr2-1fr기본 3행 → 1024px 이하에서 2행
gtr6rem-1fr sm-gtrauto고정 헤더 레이아웃 → 768px 이하에서 자연 흐름

팁 & 주의사항

gtr vs gtc

gtc는 열(columns), gtr는 행(rows)을 정의합니다. 대부분의 그리드는 gtc만으로 충분하며, gtr는 전체 높이 레이아웃에서 주로 사용합니다.

auto vs 1fr

auto는 내용에 맞는 크기, 1fr는 남은 공간을 균등 분배합니다. 헤더/푸터에는 auto, 메인 영역에는 1fr을 사용하세요.

h100vh 필수

풀 높이 레이아웃에서 gtrauto-1fr-auto만 사용하면 1fr이 0이 됩니다. 반드시 h100vh로 컨테이너 높이를 지정하세요.

grid-template-columnsgrid-auto-flowgapplace-itemsheightdisplay