grid-template-rows

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴	CSS	설명
`gtrn`	grid-template-rows: none	그리드 행 정의 제거
`gtr{vals}`	grid-template-rows: {vals}	하이픈으로 구분하여 각 행 크기를 직접 지정
`gtrauto-1fr-auto`	grid-template-rows: auto 1fr auto	헤더-메인-푸터 패턴 (가장 많이 사용)
`gtr1fr-2fr`	grid-template-rows: 1fr 2fr	1:2 비율로 두 행 분배
`gtr100px-1fr`	grid-template-rows: 100px 1fr	고정 높이 + 나머지 공간
`gtrr{N}-{val}`	grid-template-rows: repeat(N, val)	동일 크기 행을 N번 반복
`gtrr3-1fr`	grid-template-rows: repeat(3, 1fr)	3행 균등 분배
`gtrr4-auto`	grid-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 행 + 나머지 공간

언제 뭘 쓸까?

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황	추천	이유
Header-main-footer layout	`gtrauto-1fr-auto`	Most common full-height pattern
Fixed-height header + content	`gtr6rem-1fr`	Precise control of header height
Equal-height repeating rows	`gtrr3-1fr`	Even row distribution
Ratio-based layout	`gtr1fr-2fr`	Flexible ratio with fr units
Content-fit height	`gtrauto`	Auto-fit to content size

패턴별 상세

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

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

<!-- Header-Main-Footer (most common!) -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header class="p2rem bg18181B">Header</header>
  <main class="p2rem">Main Content</main>
  <footer class="p2rem bg18181B">Footer</footer>
</div>

<!-- 2-row ratio distribution -->
<div class="dg gtr1fr-2fr gap16px h40rem">
  <div class="bg18181B p2rem br8px">Top (1/3)</div>
  <div class="bg27272A p2rem br8px">Bottom (2/3)</div>
</div>

<!-- Fixed Height + Fluid -->
<div class="dg gtr6rem-1fr-auto h100vh">
  <header class="bg18181B p16px">60px Fixed header</header>
  <main class="p2rem">Remaining space</main>
  <footer class="bg18181B p16px">auto Footer</footer>
</div>

자주 쓰는 값

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

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

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

<!-- 3 equal rows -->
<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-row auto (height fits content) -->
<div class="dg gtrr4-auto gap8px">
  <div class="bg18181B p16px br8px">Short content</div>
  <div class="bg27272A p16px br8px">Slightly longer content goes here</div>
  <div class="bg18181B p16px br8px">Content</div>
  <div class="bg27272A p16px br8px">Last row</div>
</div>

자주 쓰는 값

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

풀 높이 레이아웃 패턴

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

<!-- Default full height layout -->
<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">
    <!-- Footer stays at bottom even with short content -->
    <p>Main Content</p>
  </main>
  <footer class="df jcc aic py16px bg18181B">
    <p>© 2026 Company</p>
  </footer>
</div>

<!-- Full height layout with sidebar -->
<div class="dg gtrauto-1fr-auto h100vh">
  <header class="p16px bg18181B">Header</header>
  <div class="dg gtc25rem-1fr">
    <aside class="p2rem bg18181B oya">Sidebar</aside>
    <main class="p2rem oya">Main</main>
  </div>
  <footer class="p16px bg18181B">Footer</footer>
</div>

핵심 포인트

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

반응형 사용

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

<!-- Desktop: 3 rows, Mobile: auto -->
<div class="dg gtrr3-1fr sm-gtrauto h100vh sm-ha">
  <div>Area 1</div>
  <div>Area 2</div>
  <div>Area 3</div>
</div>

<!-- Full height to natural flow on mobile -->
<div class="dg gtrauto-1fr-auto h100vh sm-ha sm-gtrauto">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</div>

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 조합	동작
`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-columns grid-auto-flow gap place-items height display