Build auto, flexible, auto rows

Keep header and footer content-sized while the middle area stays flexible.

Official sourceW3C CSS Grid Layout — explicit row sizingReviewed: 2026-08-26

STEP 1 · LEARN

How it works

grid-template-rows defines explicit rows. auto 1fr auto lets the first and last rows respond to content while the middle row receives remaining space in a container with available height.

Correct example

.page { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; }

The middle content can fill the space between header and footer.

Common mistake

.page { display: grid; grid-template-rows: 1fr 1fr 1fr; }

Three 1fr values split height equally and can make header and footer unnecessarily large.

STEP 2 · APPLY

Your exercise

Enable Grid, set min-height: 100vh and rows auto 1fr auto.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The page uses Grid.
The page has a 100vh minimum height.
The rows are auto, 1fr and auto.
The target element is present in the page.

Explain the solution logic

The minimum height provides distributable space, and the middle 1fr track receives it after the auto rows are sized.

How it works

Your exercise

Write and see the result

What needs to pass