Implicit vs Explicit Grid

The explicit grid is what you define with grid-template-*. The implicit grid is what the browser generates when items overflow your defined tracks. Understanding this distinction is crucial.

grid-template-columnsgrid-template-rowsgrid-auto-rowsgrid-auto-columnsgrid-auto-flow

1. The Explicit Grid

Tracks you define explicitly with grid-template-columns and grid-template-rows form the explicit grid. These tracks have the sizes you specify.

Live Demo

explicit cell 1

explicit cell 2

explicit cell 3

explicit cell 4

explicit cell 5

explicit cell 6

CSS

/* Explicit grid: 3 cols × 2 rows = 6 cells */
.container {
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: 60px 80px;
}
/* Explicit grid ends at row 3, col 4 */

💡 The explicit grid is always exactly the size you define. Items 1–6 here land in explicit cells.

2. The Implicit Grid — Overflow Items

Add more items than your grid can hold. Extra items are placed in automatically generated (implicit) tracks. These have default size auto (sized by content).

Live Demo

explicit row

implicit!

CSS

/* Only 1 explicit row defined */
.container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60px;     /* 1 explicit row */
}
/* Items 4-6 create implicit rows    */
/* Implicit rows height = auto       */

💡 Green border = explicit track. Red dashed border = implicit track. Items 4-6 create implicit rows with auto height.

3. grid-auto-rows Controls Implicit Rows

Use grid-auto-rows to give implicit rows a specific size. Without it, they're sized by their content (auto).

Live Demo

Without grid-auto-rows (auto)

first

second

extra

With grid-auto-rows: 80px

first

second

extra

CSS

/* Implicit rows sized by content (cramped): */
.no-auto {
  grid-template-columns: repeat(2, 1fr);
  /* no grid-auto-rows → height = auto */
}

/* Implicit rows have fixed height: */
.with-auto {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 80px;  /* implicit rows = 80px */
}

4. Mixing Explicit & Implicit Track Sizes

You can define some explicit rows and let the rest be implicit. The explicit rows use your defined sizes; implicit rows use grid-auto-rows.

Live Demo

explicit row 1

explicit row 2

implicit

CSS

.container {
  grid-template-columns: repeat(3, 1fr);
  /* 2 explicit rows with specific heights: */
  grid-template-rows: 100px 60px;
  /* all rows after row 2 will be 40px: */
  grid-auto-rows: 40px;
}

5. Implicit Columns (column overflow)

Items can also create implicit columns — for example, when you explicitly place an item beyond your defined column count, or when using grid-auto-flow: column.

Live Demo

col 1

col 2

implicit col 3

implicit col 4

CSS

.container {
  grid-template-columns: 1fr 1fr;  /* 2 explicit cols */
  grid-auto-columns: 80px;      /* implicit cols width */
}
/* placing item at col 3 creates an implicit column */
.item-c { grid-column: 3; }
.item-d { grid-column: 4; }

💡 Negative line numbers (like -1) only refer to explicit grid lines. You cannot use -1 to target the end of an implicit grid.