Blog

A grid contains some items that span two columns; without `dense`, small gaps sometimes appear where a smaller item could have fit; what does adding `dense` to `grid-auto-flow` do about this?

A container uses `grid-template-columns: 1fr 1fr 1fr;`; what does each `1fr` actually represent?

A wide container uses `grid-template-columns: repeat(3, minmax(200px, 1fr));`; what layout results when there’s plenty of room for all three tracks at their minimum size or larger?

A gallery grid has fixed-height explicit rows, but the number of photos varies and often exceeds those rows; which property lets the developer set a consistent height for the extra rows the browser adds automatically?

A row of six boxes labeled A through F is laid out with `gap: 16px 16px;`; where do gaps appear, and where do they not?

A developer writes `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));` instead of specifying a fixed number of columns; what does passing a keyword like `auto-fit` to `repeat()` do?

A hover effect uses `transition: transform 0.3s ease;`, and a developer wants to know whether swapping `ease` for `cubic-bezier(0.25, 0.1, 0.25, 1.0)` would change the animation’s behavior at all.

An item is placed with `grid-column: 1 / 3; grid-row: 1 / 2;`; how many columns does it span, and which row is it in?

Compared to the float-based hacks that came before it, what is the main advantage CSS Grid offers for describing a layout?

A grid is set up with 3 explicit columns and 2 explicit rows, and nine items are placed into it in source order; which item is the first one to land in an implicit row?