grid-template-rows
Defines the row structure of a grid container. Used with dg, and is the core property for vertical layouts like header-main-footer.
Class List
| Pattern | CSS | Description |
|---|---|---|
gtrn | grid-template-rows: none | Remove grid row definition |
gtr{vals} | grid-template-rows: {vals} | Directly specify each row size separated by hyphens |
gtrauto-1fr-auto | grid-template-rows: auto 1fr auto | Header-main-footer pattern (most commonly used) |
gtr1fr-2fr | grid-template-rows: 1fr 2fr | Two rows distributed at 1:2 ratio |
gtr100px-1fr | grid-template-rows: 100px 1fr | Fixed height + remaining space |
gtrr{N}-{val} | grid-template-rows: repeat(N, val) | Repeat equal-sized rows N times |
gtrr3-1fr | grid-template-rows: repeat(3, 1fr) | 3-row equal distribution |
gtrr4-auto | grid-template-rows: repeat(4, auto) | 4 rows, each at content height |
Visual Comparison
Compares the effect of each grid-template-rows value on row height.
auto 1fr auto (full height) — gtrauto-1fr-auto
Header and footer at content size, main takes all remaining space
1fr 2fr (ratio) — gtr1fr-2fr
Distributes space at 1:2 ratio
repeat(3, 1fr) equal — gtrr3-1fr
3 rows distributed at equal height
auto auto 1fr — gtrauto-auto-1fr
Multiple auto rows + remaining space
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| 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 |
Pattern Details
gtr{vals}grid-template-rows: {vals}
Directly specify each row size separated by hyphens (-). All units including auto, fr, px, rem, etc. can be combined.
<!-- 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>Common Values
gtrauto-1fr-auto | auto 1fr auto | Header-main-footer (sticky footer) |
gtr1fr-2fr | 1fr 2fr | 1:2 ratio 2row |
gtr1fr-1fr | 1fr 1fr | Equal 2 rows |
gtrauto-1fr | auto 1fr | Content height + remaining |
gtr6rem-1fr-auto | 6rem 1fr auto | Fixed header + fluid main + auto footer |
gtrauto-auto-1fr | auto auto 1fr | Multiple auto areas + remaining |
gtrr{N}-{val}grid-template-rows: repeat(N, val)
Repeats rows of the same size N times. The row version of 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>Common Values
gtrr2-1fr | repeat(2, 1fr) | Equal 2 rows |
gtrr3-1fr | repeat(3, 1fr) | Equal 3 rows |
gtrr4-1fr | repeat(4, 1fr) | Equal 4 rows |
gtrr3-auto | repeat(3, auto) | 3 rows at content height |
gtrr2-10rem | repeat(2, 10rem) | 2 rows, each 100px fixed |
Full Height Layout Pattern
gtrauto-1fr-auto is the most commonly used grid-template-rows pattern. Header and footer fit their content, while the main area takes all remaining space.
<!-- 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>Key points
Must be used with h100vh to fill the full screen height. Since 1fr takes all remaining space, the footer stays at the bottom even when main content is short.
Responsive Usage
Combined with media query prefixes, you can change row structure based on screen size.
<!-- 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">Class Combination | Behavior |
|---|---|
gtrauto-1fr-auto sm-gtrauto | Default full height, auto height at 768px and below |
gtrr3-1fr md-gtrr2-1fr | Default 3 rows, 2 rows at 1024px and below |
gtr6rem-1fr sm-gtrauto | Fixed header layout, natural flow at 768px and below |
Tips & Notes
gtr vs gtc
gtc defines columns, gtr defines rows. Most grids only need gtc; gtr is mainly used in full-height layouts.
auto vs 1fr
auto fits content size, 1fr distributes remaining space equally. Use auto for header/footer and 1fr for the main area.
h100vh required
In full-height layouts, using only gtrauto-1fr-auto makes 1fr become 0. You must specify container height with h100vh.