CSS Academy · Lesson

Implicit Grid and Grid-Auto-Flow

Understand how CSS Grid handles items beyond explicit tracks with implicit rows and columns.

Implicit Grid and Grid-Auto-Flow is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Explicit vs Implicit Grid

The explicit grid is defined by grid-template-columns and grid-template-rows. When items overflow beyond these defined tracks, the browser creates implicit tracks automatically.

grid-auto-rows

Defines the size of implicitly created row tracks. Without it, implicit rows are sized to fit their content (auto).

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px; /* all auto-created rows = 200px */
}

grid-auto-rows with minmax

Make implicit rows at least a certain height but expandable:

.feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

grid-auto-columns

Defines implicit column track sizes when items are placed outside the explicit column range:

.timeline {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

grid-auto-flow

Controls how the auto-placement algorithm places items:

row (default) — place in rows, adding new rows as needed
column — place in columns, adding new columns
row dense — fill gaps aggressively by backtracking
column dense — dense filling in column direction

grid-auto-flow: dense

dense makes the algorithm attempt to fill holes left by large-spanning items. This can cause items to appear out-of-order.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
  grid-auto-flow: row dense;
}

.featured { grid-column: span 2; grid-row: span 2; }

Auto-flow Column Pattern

Horizontal scrolling card strip where columns grow as needed:

.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  overflow-x: auto;
  gap: 16px;
}

Dense Packing for Gallery

A photo gallery with mixed sizes that fills gaps:

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
  gap: 8px;
}

.wide  { grid-column: span 2; }
.tall  { grid-row: span 2; }

Implicit Grid and Named Areas

Named areas only apply to the explicit grid. Items placed in the implicit grid cannot use named area placement directly — they require line-number or span placement.

Visualizing the Implicit Grid

In Chrome DevTools, the layout overlay shows both explicit (solid) and implicit (dashed) grid lines. This helps you understand where auto-placed items land.

Controlling Implicit Size per Item

Items spanning multiple rows in the implicit grid need grid-auto-rows to size correctly. Without it, implicit rows size to content which can create uneven layouts.

Quick Check

What does grid-auto-flow: row dense do?

Recap

The implicit grid extends the explicit grid with auto-created tracks. grid-auto-rows/columns controls their size; minmax() makes them flexible. grid-auto-flow directs placement direction. dense packing fills gaps aggressively — useful for masonry-style layouts but may break visual order.

Frequently asked questions

Is the “Implicit Grid and Grid-Auto-Flow” lesson free?

Yes — the full text of “Implicit Grid and Grid-Auto-Flow” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Implicit Grid and Grid-Auto-Flow”?

Understand how CSS Grid handles items beyond explicit tracks with implicit rows and columns. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Implicit Grid and Grid-Auto-Flow” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy