What Is the Implicit Grid in CSS and How Is It Generated?

In CSS Grid Layout, the implicit grid is the system of rows and columns automatically created by the browser when grid items are placed outside the explicitly defined grid tracks. While developers explicitly declare tracks using properties like grid-template-rows and grid-template-columns, dynamic content or manual positioning often exceeds those predefined boundaries. Understanding how the browser generates implicit tracks and how to control their dimensions ensures consistent, robust layouts that adapt gracefully to varying amounts of data.

Explicit Grid vs. Implicit Grid

To understand the implicit grid, it helps to first look at the explicit grid. When you declare a grid container in CSS, you define its explicit tracks:

.container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 100px;
}

This configuration defines an explicit grid consisting of two columns and one row, creating exactly two cells.

If your HTML markup contains four child items, the browser places the first two items into the explicit row. Because there are no more explicit rows defined to accommodate the remaining two items, the browser automatically creates a new row track below the first one. This newly generated row belongs to the implicit grid.

How the Implicit Grid Is Generated

The implicit grid is triggered into existence in two primary ways:

1. Excess Content via Auto-Placement

When there are more grid items than available cells in the explicit grid, the auto-placement algorithm creates new tracks to house the overflow. By default, the layout engine appends new rows along the block axis to accommodate additional elements.

2. Explicit Placement Outside Defined Bounds

You can deliberately position a grid item at specific grid lines that lie beyond the declared template:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px;
}

.item-special {
  grid-column: 4;
  grid-row: 3;
}

Even though only two columns and one row were declared, the browser automatically creates columns 3 and 4, as well as rows 2 and 3, to position the item correctly.

Sizing Implicit Tracks

By default, tracks created in the implicit grid are sized to auto. This means their size is determined entirely by the content inside them.

To control the size of implicitly created tracks, CSS provides two dedicated properties:

grid-auto-rows: Sets the size of automatically generated row tracks.
grid-auto-columns: Sets the size of automatically generated column tracks.

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

In this example, every row created beyond the explicit definition will automatically have a fixed height of 150px instead of collapsing or expanding arbitrarily based on content. You can also use functions like minmax() (e.g., grid-auto-rows: minmax(100px, auto);) to establish a minimum height while allowing tracks to expand for longer content.

Controlling Grid Growth Direction

The direction in which implicit tracks are formed is dictated by the grid-auto-flow property.

grid-auto-flow: row (Default): Tells the browser to generate new implicit rows when running out of space.
grid-auto-flow: column: Instructs the auto-placement engine to create new implicit columns along the inline axis instead of rows.
grid-auto-flow: dense: Attempts to fill in empty spaces earlier in the grid if smaller items appear later in the source order, reducing gaps while generating implicit tracks as needed.

By pairing grid-auto-flow with grid-auto-rows or grid-auto-columns, you maintain predictable control over both the flow and dimension of dynamically generated grid layouts.