Explore subgrid, grid-template-areas, auto-fill vs auto-fit, implicit grid tracks, and dense packing algorithms
0 / 5 completed
1 / 5
What does subgrid allow a nested grid container to do?
subgrid: lets a grid item that is itself a grid container adopt the parent's row or column tracks. Set grid-template-columns: subgrid on the child. Nested items then align to the outer grid, enabling precise multi-level layouts without duplicating track sizes.
2 / 5
How does grid-template-areas define layout regions?
grid-template-areas: accepts a string per row where each token is a named area, e.g. "header header" "sidebar main". Items set grid-area: header to occupy that region. A dot (.) leaves a cell empty. This approach keeps layout intent readable directly in CSS.
3 / 5
What is the key difference between auto-fill and auto-fit in repeat()?
auto-fill vs auto-fit: both create as many tracks as fit the container. The difference emerges when there are fewer items than tracks: auto-fill retains the empty tracks, preserving their space; auto-fit collapses empty tracks to zero width, letting the filled tracks grow via minmax(0, 1fr).
4 / 5
What is an implicit grid in CSS Grid?
Implicit grid: is formed when items overflow the explicit grid defined by grid-template-rows/columns. The browser auto-creates additional tracks. Their size is controlled by grid-auto-rows and grid-auto-columns. Using grid-auto-rows: minmax(100px, auto) prevents collapsing implicit rows.
5 / 5
What does grid-auto-flow: dense do?
dense packing: with grid-auto-flow: dense instructs the grid algorithm to attempt to fill in holes left by larger spanning items. A later small item may be placed earlier visually, so this can disconnect visual from DOM order — which may harm accessibility if reading order matters.