How to generate a CSS grid layout, free and in your browser
A CSS grid generator writes the grid-template-columns, grid-template-rows and gap lines of a CSS Grid layout from controls, so you do not have to count tracks by hand. Click a layout under Layout Presets or drag the Columns and Rows sliders (1 to 12 each), size every track in fr, px, % or auto, and set Column Gap and Row Gap from 0 to 100px. The preview redraws as you change anything. Then pick CSS + HTML, Tailwind CSS or React JSX under Code and click the Copy button.
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). There is no account and nothing is saved: reload the page and it returns to the Equal columns preset, which writes grid-template-columns: 1fr 1fr 1fr;, grid-template-rows: 1fr 1fr; and gap: 16px 16px;.
The tool writes the container only: display: grid, the two track lists and the gap, in the order row gap then column gap. It does not place items, span cells, name areas or align content, so add grid-column, grid-row or place-items to your own CSS. Each track is written out one by one, so a 12-column grid prints twelve 1fr values rather than repeat(12, 1fr).
Inside each cell, lay out the content with the flexbox generator, round the cards with the border radius generator and lift them with the box shadow generator.
Table of Use: layouts and the CSS the presets write
| Layout | Click | Columns, rows and gap written |
|---|---|---|
| Three equal columns, two rows | Equal columns | 1fr 1fr 1fr by 1fr 1fr, gap 16px 16px |
| Fixed sidebar and flexible main column | Sidebar + content | 250px 1fr by auto, gap 24px 24px |
| Header, left rail, content, right rail, footer | Holy grail (header and footer items still need grid-column: 1 / -1, which you add) | 200px 1fr 200px by auto 1fr auto, gap 16px 16px |
| Dashboard of twelve equal cards | Dashboard | Four 1fr columns by three 1fr rows, gap 24px 24px |
| Gallery that adds or drops columns with the screen width | Responsive gallery | repeat(auto-fit, minmax(200px, 1fr)) by auto auto, gap 16px 16px |
| Classic 12-column layout grid | 12-column | Twelve 1fr columns by auto, gap 16px 24px |
| Same grid for a Tailwind project | Tailwind CSS tab | grid grid-cols-[250px_1fr] grid-rows-[auto] gap-[24px] for the sidebar layout |
| Same grid inside a React component | React JSX tab | An inline style object with gridTemplateColumns, gridTemplateRows and gap |
Once the layout is in your stylesheet, tidy it with the CSS beautifier or shrink it for production with the CSS minifier.
Features
- Up to 12 columns and 12 rows. Two sliders set the counts. The preview and the demo markup contain one cell per intersection, so a 4 by 3 grid shows 12 numbered cells and writes 12
grid-itemelements. - Per-track sizing. Under Column Sizes and Row Sizes, every track has a number box and a unit menu with fr, px, % and auto. Choosing auto greys out the number and writes the keyword, and a negative or invalid number becomes 0.
- Separate gaps. Column Gap and Row Gap run from 0 to 100px. They are written as one
gapvalue, row first, and asgap-xandgap-yin Tailwind when the two differ. - Auto-fit mode. Tick Auto-fit and a Min Column Width slider (100 to 500px) appears. The columns line becomes
repeat(auto-fit, minmax(…px, 1fr)), the Column Sizes panel is hidden, and the Columns slider is relabelled Items per row in the demo markup, because the browser now decides the real column count. - Six presets. Equal columns, Sidebar + content, Holy grail, Dashboard, Responsive gallery and 12-column. A preset replaces your current settings.
- Three output formats. CSS + HTML has separate Copy CSS and Copy HTML buttons. Tailwind CSS gives v3-style arbitrary-value classes, with spaces written as underscores. React JSX gives a small component with the grid as an inline style.
- Copy feedback. The button reads Copied! on success and Copy failed if the browser blocks clipboard access.
Fill the cells with the gradient generator for backgrounds or the color picker for a palette, and size gallery images with the image resizer.
How to use the CSS grid generator
- Under Layout Presets, click the layout closest to what you need, or keep the starting Equal columns grid.
- Under Grid Structure, drag Columns and Rows to the counts you want.
- Under Column Sizes and Row Sizes, type a number for each track and choose fr, px, % or auto from its unit menu.
- Under Gap Settings, drag Column Gap and Row Gap.
- For a grid that reflows on its own, tick Auto-fit and set Min Column Width.
- Check the Live Preview, then choose CSS + HTML, Tailwind CSS or React JSX under Code and click Copy CSS, Copy HTML or Copy JSX.
Who can use it
- Front-end developers who want the track lists right the first time and a ready-made grid for a new page or component.
- Tailwind and React users who need the same layout as utility classes or as an inline style object.
- Designers turning a wireframe into columns and gaps, then converting the colour codes from the design file.
- Students learning what fr, auto and minmax() do, by changing one control at a time and watching the preview.
- Site owners adding a gallery or pricing section through a custom CSS box, who can test the markup first in the HTML previewer.
FAQs
What is the difference between fr units and percentages in CSS Grid?
An fr unit takes a share of the space left after fixed-size tracks and gaps are removed, so 1fr 1fr 1fr gives three equal columns that always fit, gaps included. A percentage is measured against the whole container and ignores the gaps, so three 33.33% columns plus two gaps overflow it. Use fr for flexible tracks and percentages only for an exact share of the container.
How do I make a responsive CSS grid without media queries?
Use grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). The browser fits as many columns as it can, each at least 200px wide, and stretches them to fill the row, so the column count follows the screen width by itself. In this generator, tick Auto-fit and set Min Column Width; a larger minimum means fewer columns on a narrow screen.
Can I get the grid as Tailwind CSS classes or a React component?
Yes. Switch the Code panel from CSS + HTML to Tailwind CSS to get markup with arbitrary-value classes such as grid-cols-[250px_1fr] and gap-[24px], which work in Tailwind CSS v3 and later without extra setup. React JSX gives a ready-to-paste component that applies the same grid as an inline style on the container.
How do I make an item span several columns or rows?
Put grid-column: span 2 on the item to cover two columns, or grid-row: span 2 for two rows. For exact placement use line numbers: grid-column: 1 / 3 runs from line 1 to line 3, and 1 / -1 covers the full width. These go on the item, not the container, and this generator does not write them, so add them to your own CSS.
How do I center items inside grid cells?
Add place-items: center to the grid container to center every item horizontally and vertically in its cell, or use justify-items and align-items to set each direction on its own. For a single item, use place-self: center on that item. The generator writes only the tracks and the gap, so add alignment to your own stylesheet.
Should I use CSS Grid or Flexbox?
Use Grid for two-dimensional layouts where rows and columns both matter and you want control over where items sit. Use Flexbox for a single row or column, such as a button bar, where the content should decide the sizes. Most sites use both: Grid for page and section structure, Flexbox inside the grid items.
Why is my CSS grid not showing up?
Check that the container has display: grid, that grid-template-columns or grid-template-rows is set, and that the items are direct children of the container, because a grid does not reach grandchildren. Empty items with no content or height collapse to nothing, so give them a background while you build. The grid overlay in browser developer tools draws the lines on the page.
Is my layout uploaded or saved anywhere?
It runs in your browser; nothing is uploaded (you can check the Network tab in DevTools). The preview and all the code are produced by JavaScript on your device. The tool does not store your settings either: reload the page and it returns to the Equal columns preset, with three 1fr columns, two 1fr rows and 16px gaps.