74. Implicit Grid and auto-flow
An Explicit Grid is the structure you define using grid-template-columns and grid-template-rows. The Implicit Grid is created automatically by the browser when you have more items than the explicit grid can hold, or when items are positioned outside the defined area.
grid-auto-flow
This property controls how auto-placed items flow into the implicit grid.
| Value | Description |
|---|---|
row (default) | Adds new rows to accommodate overflow. |
column | Adds new columns to accommodate overflow (requires horizontal scrolling if not managed). |
dense | Fills holes in the grid structure by moving later items up, regardless of source order. |
Sizing Implicit Tracks (grid-auto-rows / grid-auto-columns)
Since implicit tracks are created on the fly, you need to define how large they should be.
css .auto-grid { display: grid; grid-template-columns: repeat(4, 1fr);
/* Sets the height of any automatically created rows to 150px */ grid-auto-rows: 150px; }
Use Case: When dealing with user-generated content where the exact number of items is unknown, you define the columns explicitly and let the rows be created implicitly.