CSS Grid Generator

About the CSS Grid Generator

What is a CSS Grid generator?

CSS Grid is the layout system you use when a design has both columns and rows to think about. You describe the tracks once on the parent, then each child says which tracks it sits in, and the browser handles the rest. The trouble is that the properties come in a large family, the syntax for placement has three or four different spellings, and a small mistake shows up as a layout that is subtly wrong rather than obviously broken.

A generator turns that into something you can see. Add a column, change its unit, watch the preview redraw. Give an item a name and a span, and the code updates with it. Nothing is hidden behind an abstraction, so what you copy is the same CSS you would have written by hand, just without the trial and error.

What makes this one different is the map. Switch item positions to named areas and the tool writes the grid-template-areas block for you, one quoted string per row, so the CSS itself becomes a picture of the layout. It also checks whether the map is legal before printing it. Named areas have to be rectangles, and if two of your items overlap in a way that breaks that rule, the tool says which item is at fault and quietly falls back to line numbers rather than handing you CSS the browser will throw away.

How to Use This Tool

1. Start from a layout. Holy grail, sidebar app, magazine and bento dashboard cover most of what people actually build. Card grid switches to the wrapping mode.
2. Size the tracks. Each column and row gets its own number and unit. Use fr for a share of the leftover space, px or rem for something fixed, and auto when the content should decide.
3. Place the items. Col and Row are where an item starts. Wide and Tall are how many tracks it covers. The colored swatch matches the block in the preview.
4. Pick how positions are written. Named areas give you a readable map. Line numbers are more flexible when items overlap on purpose.
5. Copy both halves. The CSS box has the grid, and the HTML box below it has markup with class names that already match.

Common Use Cases

Grid earns its place whenever the layout is two dimensional. If you only care about one direction, flexbox is usually the shorter answer.

• Page shells: header, sidebar, content and footer in one declaration, with no wrapper divs and no float clearing.
• Card grids that wrap themselves: the wrapping mode writes repeat(auto-fit, minmax(220px, 1fr)), which fits as many cards per row as will comfortably go, at any screen size, with no media queries.
• Dashboards and bento layouts: a few tiles spanning several tracks each, which is exactly the case line numbers and spans were designed for.
• Forms: a two column grid with auto for the labels and 1fr for the fields lines everything up without a table.
• Overlapping content: place two items in the same cell and they stack, which is how full bleed hero images with text on top are built now.

Laying out in one direction instead? The CSS Flexbox Generator covers rows and columns of items that size themselves. For the pieces inside the layout, the CSS Box Shadow Generator and the CSS Border Radius Generator handle the card styling. Or browse all our free developer tools.

Frequently Asked Questions

What does fr actually mean?

It's a share of the space that's left after everything else has been measured. Give three columns 1fr 2fr 1fr and the leftover space is cut into four parts, with the middle column taking two of them. The important word is leftover. Fixed tracks, gaps and any auto track that grew to fit its content are all subtracted first, so an fr track is never a fixed fraction of the container.

Why does my grid overflow when I use 1fr?

Because 1fr is really minmax(auto, 1fr), and that auto minimum refuses to shrink below the widest thing inside the track. One long word, a wide image or a table will hold the whole column open. The fix is minmax(0, 1fr), which lets the track shrink past its content, and then overflow: hidden or min-width: 0 on the child if you want the content to wrap.

When should I use named areas instead of line numbers?

Named areas when the layout is a set of distinct regions that tile neatly, because the CSS reads like a diagram and rearranging it in a media query is a matter of retyping the map. Line numbers when items overlap, when spans are computed, or when the same grid holds a variable number of children. You can mix them, but not for the same item.

Do I need media queries for a responsive grid?

Often not. repeat(auto-fit, minmax(220px, 1fr)) gives you a card grid that reflows at every width on its own, which is what the wrapping mode here generates. Media queries still earn their keep when the layout has to change shape rather than just count, such as a sidebar that becomes a top bar on a phone. That's usually one query redefining grid-template-areas.

What is the difference between auto-fit and auto-fill?

Both create as many tracks as will fit. The difference shows up when there aren't enough items to fill the row. auto-fill leaves the empty tracks in place, so three cards in a six track row stay card sized and sit on the left. auto-fit collapses the empty tracks to zero, so those three cards stretch to fill the whole row. Neither is right in general. It depends on whether you want a steady card width or a full row.

Why is gap sometimes ignored?

Check that you're setting it on the grid container rather than on the items, and that the element really is display: grid and not still display: block. The other classic is space-between on justify-content in a grid whose columns are all fr. There's no free space left to distribute, so the alignment appears to do nothing while gap is working fine.

Does grid work everywhere?

Yes, for anything you're likely to support. Every current browser has shipped it since 2017, and subgrid, the last big piece, landed everywhere in 2023. The one thing to watch is the old grid-gap spelling, which was renamed to gap years ago and is only needed for Safari 11 and earlier. This tool emits gap, which every current browser understands. Print stylesheets in some browsers still handle grid poorly.