CSS Explicit & Implicit Grid

CSS Explicit & Implicit Grid

CSS Grid can contain explicitly defined tracks and automatically created implicit tracks. Understanding the difference helps you control layouts when the number or placement of grid items extends beyond the rows and columns you originally defined.

The explicit grid is created with properties such as grid-template-columns and grid-template-rows. When additional tracks are needed, CSS Grid can create them automatically as part of the implicit grid.

The Explicit Grid

The explicit grid consists of the rows and columns that you deliberately define with Grid template properties.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

This creates an explicit grid with three columns and two rows, providing six grid cells.

The explicit grid can also be created using named grid areas or the grid-template shorthand.

The Implicit Grid

The implicit grid consists of tracks that CSS Grid creates when items require rows or columns beyond those defined in the explicit grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
}

This explicitly defines three columns and one row. If the container has more than three automatically placed grid items, additional rows are needed.

CSS Grid creates those additional rows automatically as implicit tracks.

How Implicit Tracks are Created

Implicit tracks can be created when automatic placement runs out of room in the explicit grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px;
}

If six items are automatically placed in this grid, the first three occupy the explicit row. A second row is required for the remaining three items, so CSS Grid creates an implicit row.

Implicit tracks can also be created when an item is deliberately placed outside the boundaries of the explicit grid.

The grid-auto-rows Property

The grid-auto-rows property controls the size of implicitly created row tracks.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px;
  grid-auto-rows: 120px;
}

The explicitly defined row is 80 pixels tall. Any implicit rows created by the Grid are 120 pixels tall.

The property can also use flexible and content-based sizing values.

.grid-container {
  grid-auto-rows: minmax(100px, auto);
}

Each implicit row has a minimum size of 100 pixels and can grow when its content requires additional space.

The grid-auto-columns Property

The grid-auto-columns property controls the size of implicitly created column tracks.

.grid-container {
  display: grid;
  grid-template-columns: 150px 150px;
  grid-auto-columns: 200px;
}

The two explicit columns are each 150 pixels wide. If Grid creates additional implicit columns, each of those columns is 200 pixels wide.

Implicit columns commonly appear when automatic placement is configured to flow by column or when an item is positioned beyond the explicit column tracks.

The grid-auto-flow Property

The grid-auto-flow property controls how automatically placed grid items are added to the Grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;
}

The default row behavior fills each row and creates additional rows when needed.

Using column changes the automatic placement direction.

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-auto-flow: column;
  grid-auto-columns: 150px;
}

Items fill the defined rows by column, and additional implicit columns are created as needed.

The dense keyword can also be added to allow later items to fill earlier gaps when they fit, although this can make the visual order differ from the source order.

Implicit Track Patterns

The grid-auto-rows and grid-auto-columns properties can contain more than one track size. When multiple implicit tracks are created, the sizing pattern repeats.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px 120px;
}

The first implicit row is 80 pixels tall, the second is 120 pixels tall, the third returns to 80 pixels, and the pattern continues as additional implicit rows are created.

This allows automatically created tracks to follow a repeating sizing pattern without explicitly defining every row or column.

Explicit Placement Outside the Grid

Implicit tracks are not created only by automatic placement. Positioning an item beyond the explicit grid can also require Grid to create additional tracks.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.special {
  grid-column: 5;
}

The explicit grid contains three columns, but the special item is placed at column line 5. CSS Grid must extend the grid to support that placement, creating implicit column tracks as necessary.

The sizes of those implicit columns can be controlled with grid-auto-columns.

Explicit vs Implicit Grid

The explicit and implicit grids work together as part of the same Grid layout, but they are created differently.

Defining the main structure explicitly while allowing CSS Grid to create additional tracks when necessary can be useful for layouts containing a changing number of items.

Explicit & Implicit Grid Example

The following example defines three columns and one 80-pixel row. Six items require a second row, which CSS Grid creates automatically.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px;
  grid-auto-rows: 120px;
}

The first row belongs to the explicit grid and is 80 pixels tall. The second row belongs to the implicit grid and receives its 120-pixel size from grid-auto-rows.

Open the example in the editor and change grid-auto-rows or add more grid items to see how CSS Grid creates and sizes additional implicit rows.