CSS Grid Generator
Build a CSS grid layout visually. Set columns, rows and gaps — edit grid-template-columns directly to use fr, minmax() or fixed values.
CSS generated is free to use — no attribution required.
How do you use the CSS grid generator?
Set the number of columns and rows and adjust each track’s size, then set the gap. The preview renders the actual grid so you can see how fr units divide the space. The generated CSS is the container rule — the children need no rules at all unless you want to place them explicitly.
What is the CSS grid syntax?
A grid starts with display: grid plus track definitions: grid-template-columns and grid-template-rows. Each value in the list defines one track, so grid-template-columns: 200px 1fr 200px creates three columns with a flexible middle.
repeat() saves writing the same value over and over — repeat(3, 1fr) is identical to 1fr 1fr 1fr — and gap sets the spacing between tracks.
What does the fr unit do?
fr distributes the space left over after fixed-size tracks, padding and gaps have been accounted for. In grid-template-columns: 200px 1fr 2fr the last two tracks split the remainder one third to two thirds.
It is not the same as a percentage: 1fr works from remaining space and accounts for the gap, so a three-column repeat(3, 1fr) grid with a gap fits exactly, while repeat(3, 33.33%) overflows once you add one.
What is the difference between auto-fit and auto-fill?
Both create as many tracks as will fit, and they behave identically until the grid has more room than it has items. At that point auto-fill keeps the empty tracks it created, so the existing items stay at their track width and leave a gap on the right. auto-fit collapses the empty tracks to zero, letting the real items stretch to fill the row.
So auto-fit when items should expand to use the space, auto-fill when the column rhythm should be preserved even if it means empty slots.
How do you build a responsive grid without media queries?
The single most useful line in CSS grid is grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)). It says: fit as many columns as possible, never let one be narrower than 240px, and share out any leftover space evenly.
That one declaration reflows a card grid from four columns to one across every screen size with no breakpoints at all. Use min() inside the minmax — minmax(min(240px, 100%), 1fr) — if the container can ever be narrower than the minimum, which prevents overflow on very small screens.
How do you place items on a grid?
Grid lines are numbered from 1, so grid-column: 1 / 3 places an item from line 1 to line 3, spanning two columns. The span keyword is usually clearer: grid-column: span 2 spans two tracks wherever the item happens to land.
Negative numbers count from the end, which makes grid-column: 1 / -1 the reliable way to say "full width" without knowing how many columns there are.
What are named grid areas?
grid-template-areas lets you draw the layout as text: rows of quoted strings where each name marks a cell. Children are then placed with grid-area: header and the browser works out the coordinates.
It is the most readable way to express a page skeleton, and rearranging the layout at a breakpoint means rewriting the picture rather than recalculating line numbers. A dot stands in for an empty cell.
What is subgrid and can you use it?
Normally a nested grid creates its own independent tracks, so cards in a row cannot align their internal parts with each other. grid-template-columns: subgrid makes the child adopt the parent’s tracks instead, so every card’s title, body and footer line up across the row even when the text lengths differ.
Subgrid has been Baseline widely available since September 2023, so it is safe to use in production rather than something to plan around.
When should you use grid instead of flexbox?
Use grid when you know the structure and want the layout to impose it — page skeletons, card grids, anything where things must line up in two directions. Use flexbox when the content should decide, along a single axis.
A useful test: if you find yourself setting widths on flex children to make columns line up across rows, you want grid. If you are fighting grid to make items size themselves naturally, you want flexbox. Most real pages use both, with grid outside and flex inside.
What is the browser compatibility for CSS grid?
CSS grid is supported in every current browser without prefixes, and has been stable for years — repeat(), minmax(), auto-fit, named areas and gap included. Subgrid is the newest widely available piece, Baseline since September 2023. The old -ms-grid syntax targets a browser that is no longer supported and can be dropped.