CSS Grid Playground

Edit grid-template-columns and grid-template-rows directly or pick from common presets (3 cols, sidebar, holy grail, auto-fit cards). Adjust gap, justify-items, and align-items with chips; tweak how many items show in the preview. The preview reflects every change live, and the CSS output is ready to paste. Companion to the Flexbox Playground for the other half of CSS layout.

The fr unit is the piece that makes grid different from everything before it, and it is not a percentage. A track sized 1fr takes a share of the space left after fixed tracks and gaps are subtracted, so 200px 1fr 1fr divides the remainder in two rather than dividing the container. That is why a grid with gaps still adds up, where a percentage layout overflows by exactly the width of its gutters.

auto-fit and auto-fill look identical until the row is not full, and then they behave oppositely. Both repeat a track as many times as will fit; auto-fill keeps the empty tracks, so three cards in a five-track row stay at the left in their original width, while auto-fit collapses the empty ones and lets the three stretch across the whole row. Which you want depends on whether a partly filled row should look like a grid or like a row of cards.

The alignment properties come in pairs that are easy to confuse. justify-* works along the inline axis and align-* along the block one, and the -items versions position content inside each cell while the -content versions distribute the tracks themselves within the container. A grid whose tracks do not fill the container is the case where the difference becomes visible.

Grid handles two dimensions at once, which is the reason to reach for it over flexbox rather than a matter of taste. A row of items that should wrap and size themselves is flexbox work; a layout where columns must line up across rows is grid work, and doing the second with the first is how alignment ends up maintained by hand.