CSS Grid Generator

Laying out in two dimensions

CSS Grid controls rows and columns at once, which is what sets it apart from flexbox's single axis. You define tracks with grid-template-columns and grid-template-rows, then place items into the cells. The fr unit represents a fraction of the leftover space, so 1fr 2fr gives the second column twice the width of the first after any fixed sizes are subtracted.

repeat, minmax, and auto-fill

Writing 1fr 1fr 1fr is fine, but repeat(3, 1fr) scales better. The real power combo is repeat(auto-fill, minmax(200px, 1fr)), which creates as many 200px-minimum columns as fit and lets them grow to fill the row. That builds a responsive card grid with no media queries at all.

Example

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

On a narrow phone this collapses to one column; on a wide monitor it might show five. Each item keeps a sensible minimum width and the gap property spaces them without margin hacks.

Pitfalls

A frequent confusion is auto-fill versus auto-fit: auto-fill keeps empty tracks when there are few items, while auto-fit collapses them so the present items stretch across the whole row. Line-based placement counts grid lines, not cells, so a track spanning columns 1 to 3 covers two columns, not three. For a single-axis bar or toolbar, the simpler clamp-based sizing on a flex row is often enough.

FAQ

Grid or flexbox? Grid when you control both axes (a page layout, a card gallery). Flexbox when content flows along one axis and should wrap naturally.

How do named areas work? grid-template-areas lets you draw the layout as a string map, then assign each child a name. It is readable but rigid, so it suits stable page shells more than dynamic content.

Why does an item overflow its cell? Grid items default to min-width: auto, so long content refuses to shrink. Set min-width: 0 on the item to let it fit.