Lesson 20 of 55 · HTML
CSS Grid Layout
Duration: 11 min
Grid – Two‑Dimensional Layout
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* three equal columns */
grid-gap: 1rem; /* spacing between tracks */
}
grid-template-columns/grid-template-rowsdefine tracks (columns and rows).grid-column/grid-rowplace items.frunit distributes free space proportionally.
Example: Card layout with auto‑fill
<div class='grid'>
<div class='card'>…</div>
<div class='card'>…</div>
<div class='card'>…</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.5rem;
}
auto-fill creates as many columns as will fit, each at least 200 px wide. Empty tracks collapse automatically.
Advanced features
grid-template-areas– Named layout regions for easier reading.align-items,justify-items– Align content inside each grid cell.subgrid(future) – Allows a child grid to inherit the parent’s column definition.
Quick checklist for Grid
- Grid defined with
display:grid? ✅ - Tracks defined using
fr,minmax, or explicit pixel values? ✅ - Gap used for spacing (
gap,row-gap,column-gap)? ✅ - Items placed with
grid-column/grid-rowwhere needed? ✅
Tip: Pair
auto-fillwithminmaxfor truly fluid, responsive grids that adapt to any screen size.