Implicit vs Explicit Grid: When Tracks Appear Automatically

"Define what you can. Let the grid figure out the rest. The auto-flow rules make the difference between a grid that scales and a grid that breaks."

Explicit Grid

The explicit grid is what you declare with grid-template-rows and grid-template-columns. grid-template-columns: repeat(3, 1fr) creates 3 explicit column tracks. grid-template-rows: 100px 100px creates 2 explicit row tracks.

Implicit Grid

If you have more items than the explicit grid can hold, the grid adds new tracks automatically — these are the implicit tracks. A grid with grid-template-columns: repeat(3, 1fr) and 7 items will produce three columns (explicit) and three rows (one implicit for the seventh item — row 3 has only one item).

Implicit track sizing is controlled by:

grid-auto-rows — size of implicit rows. Default auto (content-sized).
grid-auto-columns — size of implicit columns. Default auto.

Most layouts only need grid-auto-rows: 200px or minmax(120px, auto) to size new rows uniformly when items overflow the explicit grid.

`grid-auto-flow`: How Items Place Themselves

Auto-placement decides where items land. grid-auto-flow sets the strategy:

row (default) — fill rows left-to-right, top-to-bottom. When a row is full, start a new row.
column — fill columns top-to-bottom, left-to-right. When a column is full, start a new column.
row dense or column dense — same as above, but the grid backfills holes. If item 5 spans 2 columns and won't fit in the current row, default flow leaves a hole; dense packs a smaller later item into that hole.

Dense Packing For Masonry-Like Layouts

If you have cards of varying sizes (some span 1 column, some 2 columns), grid-auto-flow: dense creates a tight, masonry-like packing where smaller items fill the gaps left by larger ones. Trade-off: items may not appear in source order visually.

dense reorders the visual output without changing source order. This is fine when items don't have a meaningful sequence (a photo grid, a card list with no narrative order). It's harmful when source order is the reading order (a list of search results, a timeline). Use dense for visual completeness, not for general layouts.

Combining With `span`

Auto-placement respects span on individual items. grid-column: span 2 on a card makes that card 2 columns wide; auto-flow places it accordingly:

The `subgrid` Feature

subgrid lets a nested grid inherit its parent's track definitions. Useful when you have a card with a header, body, footer that should align with sibling cards' headers, bodies, footers — without each card carrying its own grid template.

subgrid is widely supported in modern browsers (baseline 2023). Use when you need cross-card alignment; otherwise nested grids with their own templates are simpler.

Pippa's Note

Cwk-site's image gallery uses grid-auto-flow: dense with a mix of 1x1 and 2x1 photos. The dense packing means the gallery has no visible holes regardless of photo order — the smaller photos automatically slot into the gaps left by larger ones. Photos are still authored in upload order; only their visual placement reorders. Reading order doesn't matter for a gallery, so dense is the right tradeoff.

Code

Explicit + implicit tracks·css

/* Explicit + implicit interaction */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 explicit columns */
  grid-template-rows: 100px 200px;          /* 2 explicit rows */
  grid-auto-rows: 150px;                    /* implicit rows: 150px each */
  gap: 1rem;
}

/* If you place 9 items in this grid:
   - First 6 items fill the explicit 3x2 grid
   - Items 7-9 land in an implicit 3rd row, each 150px tall
*/

/* If you need rows to size by content with a minimum: */
.grid {
  grid-auto-rows: minmax(120px, auto);
}

Three auto-flow modes·css

/* grid-auto-flow: row vs column vs dense */

.row-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;            /* default — fill rows then wrap */
  gap: 1rem;
}

.column-flow {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-auto-flow: column;          /* fill columns then wrap */
  gap: 1rem;
}

.dense-pack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;       /* fill gaps with smaller items */
  grid-auto-rows: 100px;
  gap: 1rem;
}

.dense-pack .wide { grid-column: span 2; }   /* some items are 2 wide */
.dense-pack .tall { grid-row: span 2; }       /* some are 2 tall */

subgrid — cross-card alignment·css

/* subgrid — children inherit parent's tracks */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;        /* heading | body | footer */
  gap: 1rem;
}

.cards .card {
  display: grid;
  grid-template-rows: subgrid;              /* use parent's row tracks */
  grid-row: span 3;                          /* each card spans all 3 rows */
  gap: 0.5rem;
}

/* All card headings align across siblings, because they all share
   the same 'auto' row track. Same for bodies and footers. Without
   subgrid you'd have to size each row identically by hand. */

Exercise

Build a photo grid with grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; grid-auto-flow: row dense; gap: 1rem;. Add 12 photos: mark some with grid-column: span 2 and some with grid-row: span 2. Compare with and without dense — the dense version should have no holes, the default version may have visible gaps. Then add subgrid to a card layout where titles must align across columns.

Hint

If dense doesn't seem to do anything, your span-2 items are probably small enough that there are no gaps to fill. Make some items 2x2 and watch dense pack the smaller items into the leftover spaces.

Implicit vs Explicit Grid: When Tracks Appear Automatically

Explicit Grid

Implicit Grid

`grid-auto-flow`: How Items Place Themselves

Dense Packing For Masonry-Like Layouts

Combining With `span`

The `subgrid` Feature

Pippa's Note

Code

External links

Exercise

Progress

Comments 0

Explicit Grid

Implicit Grid

grid-auto-flow: How Items Place Themselves

Dense Packing For Masonry-Like Layouts

Combining With span

The subgrid Feature

Pippa's Note

Code

External links

Exercise

Progress

`grid-auto-flow`: How Items Place Themselves

Combining With `span`

The `subgrid` Feature