Implicit Grid and Grid-Auto-Flow
Understand how CSS Grid handles items beyond explicit tracks with implicit rows and columns.
Explicit vs Implicit Grid
The explicit grid is defined by grid-template-columns and grid-template-rows. When items overflow beyond these defined tracks, the browser creates implicit tracks automatically.
grid-auto-rows
Defines the size of implicitly created row tracks. Without it, implicit rows are sized to fit their content (auto).
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px; /* all auto-created rows = 200px */
}All lessons in this course
- Named Lines and Named Grid Areas
- Auto-fit and Auto-fill with minmax
- Implicit Grid and Grid-Auto-Flow
- Subgrid for Aligned Nested Content