CSS grid generator
Configure CSS Grid visually and get the code: columns and rows as fr/px/auto/minmax/repeat tracks, gap and alignment, a grid-template-areas map, auto-fit sizing and a ready-to-paste HTML sample.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Presets
Track sizes
Replaces the column track with repeat(auto-fit, minmax(min, 1fr)) so the column count drops as the container narrows
repeat(3, 1fr)autoGap and alignment
Named areas
One row per line, space-separated area names, every row the same length; use . for an empty cell. Leave blank to omit grid-template-areas.
Live preview
The preview renders the real grid declarations; cells are generated from the tracks
Generated CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;
}Sample HTML
Pairs with the CSS above — paste both to see the layout
<div class="grid"> <div class="grid-cell">1</div> <div class="grid-cell">2</div> <div class="grid-cell">3</div> <div class="grid-cell">4</div> <div class="grid-cell">5</div> <div class="grid-cell">6</div> </div>
What this tool does
- Stop hand-writing grid-template-columns: dial in the tracks, gaps and alignment, then copy the CSS plus the matching HTML sample.
- Build responsive card lists with auto-fit — repeat(auto-fit, minmax(240px, 1fr)) changes the column count as the container narrows, no media queries needed.
- Describe a page skeleton as a character map and get grid-template-areas together with one grid-area rule per named area.
- Learn or debug layout: the live preview shows exactly how fr, px, auto, minmax and repeat tracks behave.
Example
Input
Selector .grid, columns repeat(3, 1fr), rows auto, 16px row and column gap, justify-items and align-items both stretch
Output
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 16px;
justify-items: stretch;
align-items: stretch;
}The HTML sample emits six placeholder cells (3 columns × 2 rows) until you fill in an area map, then it switches to one element per area name.
Frequently asked questions
fr, px, auto or minmax — which track should I use?
Use fr to split leftover space, px for fixed sidebars and toolbars, auto when the content decides the size, and minmax(200px, 1fr) when you want a minimum width that can still grow — that last one is the workhorse of responsive grids.
What is the difference between auto-fit and auto-fill?
Both pick a column count from the container width; they differ when space is left over. auto-fit collapses empty tracks so existing items stretch to fill the row, while auto-fill keeps the empty tracks and holds each item at its minimum. Card lists usually want auto-fit.
What are the rules for a grid-template-areas map?
One line per row, area names separated by spaces, and every row must have the same number of cells — otherwise the browser drops the whole declaration. Use . for cells that belong to no area, and make sure each name forms a rectangle: spanning rows or columns is fine, an L shape is not.
Why is there no grid-area rule in the generated CSS?
Those .grid-<name> { grid-area: <name>; } rules are only emitted when you provide an area map, and you still have to apply the class to the matching child element. Without an area map the items are auto-placed into the tracks in order.
Can I mix gap with margins?
You can, but there is rarely a reason to. gap only applies between tracks, never at the container edges, so you avoid the classic "first and last child margin" cleanup — prefer it over per-item margins in grid layouts.
Keywords：css gridgrid generatorgrid-template-areasgrid-template-columnsauto-fitminmaxrepeatlayoutCSS Grid 生成网格布局栅格前端布局