CSS Grid Advanced
repeat(auto-fill, minmax(250px, 1fr)) creates a responsive grid that adjusts columns to fit. grid-auto-flow: dense fills gaps from spanning items. This eliminates the need for breakpoint-based column media queries.
Advanced Grid Techniques /* Auto-fill responsive grid (no media queries!) */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 24px;
}
/* Span multiple columns */
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Subgrid */
.card-grid {
grid-template-rows: subgrid;
}
Test your understanding before moving on
1. What does minmax(200px, 1fr) do?
A. Fixes column to 200px
B. Column is min 200px, max 1 fraction unit
C. Creates 200 columns
D. Hides small columns
💡 minmax() defines a min and max size for a grid track.
2. auto-fill in grid:
A. Creates fixed columns
B. Creates as many columns as fit, keeping empty tracks
C. Fills with content
D. Is deprecated
💡 auto-fill fills the row with as many columns as possible, keeping empty columns.
3. grid-column: span 2 means:
A. Column 2
B. Item spans across 2 columns
C. Start at column 2
D. Height of 2 rows
💡 span 2 makes the item span 2 column tracks.
4. What is subgrid?
A. A nested flexbox
B. Child items aligning to parent grid tracks
C. A small grid
D. A CSS function
💡 subgrid allows children to align to the parent grid's tracks rather than creating a new grid.
5. dense keyword in grid-auto-flow:
A. Removes gaps
B. Back-fills holes in the grid
C. Creates dense borders
D. Increases gap
💡 grid-auto-flow: dense fills gaps by moving smaller items back to fill holes.