CSS Grid Generator

How to use CSS Grid Generator

1. Set the number of columns and rows, or write a template with fr units.
2. Set the gap — one value for both axes, or separate row and column gaps.
3. Adjust justify and align to position items within their tracks.
4. Copy the generated CSS.
5. gap replaced grid-gap years ago and works in flexbox too; the old name still works but is deprecated.
6. An fr track will not shrink below its content unless you set minmax(0, 1fr) — the usual cause of a grid overflowing its container.
7. Grid placement does not change source order for assistive technology or tab order.

fr is the unit that makes grid worth using

A fraction unit distributes whatever space is left after fixed sizes and gaps are subtracted. grid-template-columns: 200px 1fr gives a fixed sidebar and a main column that takes the rest; 1fr 2fr splits the remainder one-third and two-thirds. This is why grid replaced percentage widths: percentages do not know about your gap, so 50% + 50% + a 20px gap overflows, while 1fr 1fr with a gap simply works. Nothing needs recalculating when the gap changes.

A responsive grid with no media queries

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) fits as many 240px-minimum columns as the container allows and stretches them to fill it — four across on a desktop, two on a tablet, one on a phone, with no breakpoints written anywhere. It is the single most useful line in CSS layout. auto-fill is the near-identical alternative: it keeps empty tracks where auto-fit collapses them, which matters only when you have fewer items than columns.

Named areas make layouts readable

grid-template-areas lets you draw the layout in the stylesheet as strings — “header header” / “sidebar main” / “footer footer” — and assign each element with grid-area: header. Six months later that is instantly legible in a way that line numbers are not, and rearranging the layout for a breakpoint means rewriting three strings rather than renumbering every child. Note that source order still governs reading order for screen readers and keyboard navigation, so do not use grid placement to reorder anything meaningful.

Grid or flexbox

Grid when the layout is two-dimensional and things must line up across rows and columns: page structure, dashboards, card galleries with consistent columns, forms with aligned labels. Flexbox when it is one-dimensional: a navbar, a button row, centring, a list that wraps. They are complementary rather than competing, and a grid whose cells each use flex internally is the normal arrangement rather than a compromise.