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. sdfsdfs

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.

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 */
explicit cell 1
explicit cell 2
explicit cell 3
explicit cell 4
explicit cell 5
explicit cell 6
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).

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       */
explicit row
explicit row
explicit row
implicit!
implicit!
implicit!
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).

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 */
}
Without grid-auto-rows (auto)
first
second
extra
extra
extra
With grid-auto-rows: 80px
first
second
extra
extra
extra

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.

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;
}
explicit row 1
explicit row 1
explicit row 1
explicit row 2
explicit row 2
explicit row 2
implicit
implicit
implicit

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.

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; }
col 1
col 2
implicit col 3
implicit col 4
Negative line numbers (like -1) only refer to explicit grid lines. You cannot use -1 to target the end of an implicit grid.