Explicit and Implicit Grids
Explicit tracks are created by declarations such as grid-template-columns and grid-template-rows. When items require additional tracks, the browser creates implicit tracks.
grid-auto-rows and grid-auto-columns allow developers to control those automatically generated tracks.
Explicit vs Implicit Grid
Implicit Row Sizing
.feed {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(150px, auto);
gap: 1rem;
}💡 Automatically created rows receive a minimum and flexible maximum size.
Key Takeaways
- Explicit tracks are intentionally defined.
- Implicit tracks are generated as needed.
- Use
grid-auto-*properties to control implicit tracks.
Knowledge Check
What creates implicit grid tracks?