GRID / LESSON 01

Control the rows your grid creates automatically

Separate explicit track definitions from implicit tracks created by extra content.

Content updated

By the end, you can…

  • The explicit grid is a starting structure, not a limit. grid-auto-rows controls additional rows.
  • Build a two-column grid with one explicit row, then make additional rows grow with their content.
Before you begin

Build on the CSS introduction

The CSS Grid introduction already covers columns, cells, and line numbers. Now start with two columns and only one explicit row. Three items require a second row even though grid-template-rows names only the first. That additional row is implicit. Adding content does not replace an earlier item or make the extra item disappear.

grid-template-rows controls the explicitly defined rows; grid-auto-rows controls rows outside that template. In this example the first row is 60px and the extra row is 100px. Changing grid-auto-rows leaves the first row unchanged. This distinction is useful for lists where the number of cards comes from content rather than a fixed design mockup.

An explicit fixed row can be smaller than the content placed inside it. Changing the implicit-row rule cannot fix that explicit row. Give content-driven rows an appropriate minimum and an automatic maximum when they need to grow. The last comparison deliberately adds a long paragraph so you can see the row expand instead of guessing from empty boxes.

What to remember first

Remember first

The explicit grid is a starting structure, not a limit. grid-auto-rows controls additional rows.

Tools for this experiment

grid-template-rows: 60pxDefine the explicit row
Only the first row receives this size in the example.
grid-auto-rows: 100pxSize extra rows
The third item creates an implicit second row governed by this rule.
minmax(60px, auto)Set a floor, allow content growth
The row is at least 60px but can grow to accommodate its content.
outlineShow a boundary without consuming space
The dotted preview boundary is an outline, so it does not change the track calculations.

Walk through an example

Use this HTML inside the body of a document and place the CSS in your linked stylesheet. The preview adds a dashed outline and card colors to make boundaries visible; those decorations do not control the layout. Its body has 16px padding on each side. Fixed preview widths are intentional: on a small screen, scroll inside the preview to inspect the whole experiment.

html
<div class="layout">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
css
.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 60px;
  grid-auto-rows: 100px;
  gap: 12px;
}
.item {
  padding: 8px;
}

A and B use the explicit 60px row; C creates an implicit 100px row.

See it happen: try a small change

Explicit first row, implicit next row

The first row always stays 60px in these variants. Watch the row containing C.

Code to notice

.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 60px;
  grid-auto-rows: 100px;
  gap: 12px;
}
.item {
  padding: 8px;
}

Live result

Lesson example
index.htmlPreview

What changed: A and B use the explicit 60px row; C creates an implicit 100px row.

A common wrong turn

More items can create more tracks even when you declared only one row. Do not hide the overflow to force the original rectangle to stay tidy. Inspect whether the constrained row is explicit or implicit before changing the sizing rule.

Try it in your own project

Copy the example into your local HTML and CSS files. Predict one change before saving and refreshing the browser. Use the interactive versions above to check your prediction, then explain which container, item, or track changed. The related playground offers extra practice with its supported controls; use your local files for properties it does not expose.

Your turn: control the rows your grid creates automatically

Build a two-column grid with one explicit row, then make additional rows grow with their content.

Optional exploration

Use the playground to explore the controls and generated code. It is an open experiment, so it does not check your answer.

Open Grid playground →

  1. Use three items, a 60px explicit row, and 100px automatic rows. Identify which rule sizes each row.
  2. Change only grid-auto-rows to minmax(60px, auto). Add enough text to the third item to require more than 60px.
  3. Add a fourth and fifth item. Explain which rows are implicit, then remove any fixed container height that would clip their content.

Go to the source

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.