CSS Grid Generator

What CSS Grid actually does

Setting display: grid on an element creates a grid formatting context. Its direct children stop stacking in normal flow and are placed instead on a two dimensional network of lines formed by the column and row tracks you define. That is the real difference from Flexbox: Flexbox distributes along one axis, Grid defines both axes at once.

The skeleton comes from grid-template-columns and grid-template-rows. Both take a space separated list of track sizes, one value per column or row. Numbered lines appear between the tracks, so a three column grid has four vertical lines numbered 1 to 4. The numbers you write when placing an item refer to those lines, not to the columns, which is why grid-column: 1 / 3 spans two columns rather than three.

Track units and what fr really distributes

A track can be a fixed length (px, rem), a percentage of the container, auto, which grows with its content, min-content, the narrowest the content can get, or max-content, the widest it wants to be without wrapping. All of those are measurable sizes.

fr behaves differently and is the unit people misread most often. It is not a length but a share, and it divides up the free space only, meaning whatever is left after the inflexible tracks and all the gaps have been subtracted. So in 200px 1fr 1fr each flexible track gets half of the remainder, not half of the container.

minmax() and the responsive grid idiom

minmax(min, max) puts a floor and a ceiling on a track. It never shrinks below the floor, never grows past the ceiling, and moves freely in between according to content and available space. It is useful on its own, but it earns its reputation in combination with repeat().

Anyone who wants a responsive card grid without media queries reaches for repeat(auto-fit, minmax(240px, 1fr)). The browser works out how many tracks of at least 240px fit in the container, creates them, and hands the leftover width to those tracks through 1fr. As the viewport narrows, the column count drops on its own.

The difference between auto-fit and auto-fill only shows up when you have fewer items than tracks. auto-fill keeps the empty tracks in the grid, so three cards still sit in an eight column layout and huddle on the left. auto-fit collapses the empty tracks to zero, so the remaining cards stretch to fill the row. Pick auto-fit when you want cards to grow, auto-fill when you want the column rhythm to stay put.

Line based placement or named areas

There are two ways to place an item. The first is by line number: grid-column: 2 / 4 runs the item from vertical line 2 to vertical line 4. The span keyword lets you say "cover two columns wherever you land" instead of naming both lines.

The second is grid-template-areas, where you draw the layout on the container as a picture made of names and then give each child a name with grid-area. For page skeletons built from a handful of meaningful regions this makes the CSS readable, and rearranging the layout is a matter of redrawing the picture. For repeating content of unknown length, such as a card list, named areas get unwieldy fast and line numbers are the better tool.

Implicit tracks, grid-auto-rows and dense packing

When you place more items than you declared tracks for, the browser generates extra ones. These are implicit tracks and they are sized auto by default. Use grid-auto-rows to control their height, or grid-auto-flow: column if new items should open columns instead of rows.

grid-auto-flow: dense backfills the holes that differently sized items leave behind by pulling later, smaller items forward. It closes the visual gaps, but it also detaches the visual order from the DOM order, which is disorienting for keyboard and screen reader users. Fine for a gallery where order carries no meaning, best avoided for content that is meant to be read in sequence.

justify versus align, items versus content

Two axes: justify-* controls the inline axis, which is horizontal in a left to right document, and align-* controls the block axis, which is vertical. Two scopes: *-items positions every item inside its own cell, while *-content positions the whole set of tracks inside the container. The second one does nothing unless the tracks are smaller than the container, so justify-content has no visible effect when your columns are sized in fr and already consume every pixel. That is also why this generator leaves out any alignment declaration still sitting at its initial value: a line that does nothing only misleads the next reader.

Grid or Flexbox?

The practical rule: build the outer frame with Grid and lay out the small, single axis clusters inside it with Flexbox. They are not rivals, they are two layers you nest.

Three mistakes worth knowing

• 1fr overflowing. 1fr is really minmax(auto, 1fr), and that auto floor stops the track from getting narrower than its content. A column holding a long string or a scrollable table will blow out because of it. Write minmax(0, 1fr), or set min-width: 0 on the item.
• Forgetting that grids do not reach grandchildren. Only direct children take part in the grid. Add a wrapper div and its contents are no longer grid items, so either drop the wrapper or give it a display: grid of its own.
• Treating gap as margin. gap only opens space between tracks. It adds nothing on the outer edge and nothing before the first item, so reach for padding on the container when you want breathing room around the grid.

If the layout sits on a colour transition, the value produced by the CSS gradient generator drops straight onto the container you build here.