CSS Grid Generator
Build grid layouts visually. Set the columns, rows and gaps, then drag across the preview to draw items. Copy clean CSS with line numbers or named grid-template-areas, the matching HTML, or Tailwind classes.
Presets
Columns
Rows
Container
Items
Item 1
Output
Preview size
Only changes the preview box. It isn't part of the code.What Is CSS Grid?
A two-dimensional layout system: rows and columns at the same time.
display: grid turns an element into a grid container. You define tracks with grid-template-columns and grid-template-rows, and its children (grid items) fill the cells in order, or go exactly where you put them.
The fr unit shares out the free space: 1fr 2fr gives the second column twice the width of the first. repeat(auto-fill, minmax(160px, 1fr)) fits as many columns as there's room for. That's a responsive card grid with no media queries.
Items can span several cells using line numbers (grid-column: 1 / 3) or named areas: describe the layout as a little text map with grid-template-areas, then give each item a grid-area name.
Use Grid for page layouts, dashboards, galleries and forms, anywhere rows and columns need to line up. For a single row or column of items, Flexbox is often simpler.
Grid Properties at a Glance
Container properties go on the parent; placement properties go on the items.
grid-template-columns / rows
The track sizes, e.g. 200px 1fr, repeat(3, 1fr) or repeat(auto-fill, minmax(160px, 1fr)).
grid-auto-rows / flow
Size of rows created automatically, and whether new items fill rows or columns first (dense back-fills gaps).
grid-column / grid-row
1 / 3 runs from line 1 to line 3 (two cells); span 2 takes two cells wherever the item lands.
grid-template-areas
A text map such as "header header" "nav main"; items join it with grid-area: header. Use . for an empty cell.
justify-items / align-items
Align every item inside its cell: stretch (default), start, center, end. -self does one item.
justify-content / align-content
Move the whole grid inside the container when the tracks don't fill it, e.g. center or space-between.
How to Use the CSS Grid Generator
Get your result in under ten seconds.
Set the tracks
Choose a fixed number of columns, responsive auto-fill columns, or type your own track list. Do the same for rows.
Place the items
Drag across empty cells to draw an item, or set column and row start and span for each item. Name items to get readable areas.
Copy the code
Switch between CSS, HTML and Tailwind, turn named areas on or off, and press Copy.
Why Use the CSS Grid Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Draw on the grid
Drag across cells to place an item. No need to work out line numbers.
Named areas
Get a readable grid-template-areas map when your layout allows it.
Responsive columns
auto-fill / auto-fit with minmax(): columns that adapt without media queries.
Checked values
Custom track lists are checked by your browser, so invalid CSS never ends up in your code.
Tailwind output
The same layout as Tailwind classes.
Private
Runs entirely in your browser. Nothing is uploaded.
Frequently Asked Questions
One share of the free space in the grid. 1fr 1fr 1fr makes three equal columns; 2fr 1fr makes the first twice as wide. A 1fr column won't shrink below its content's minimum width; use minmax(0, 1fr) if you need it to.
Both fit as many columns as there's room for. With few items, auto-fill keeps the empty columns, so items stay their minimum width. auto-fit collapses the empty columns, so items stretch to fill the row.
Use grid-column: 1 / 3 (from line 1 to line 3) or grid-column: span 2. In this tool, drag across the cells or set the column start and span.
When every placed item is a rectangle that doesn't overlap another item, and the columns aren't auto-fill/auto-fit (the number of columns must be fixed). The tool tells you when areas aren't possible and uses line numbers instead.
If any column uses fr, the columns take up all the free space, so there's nothing left to move. It works with fixed sizes like repeat(3, 100px).
fr rows share out the container's height, so the container needs a height. With an automatic height they behave like auto.
It uses exact arbitrary values such as grid-cols-[repeat(3,_1fr)], because Tailwind's grid-cols-3 means repeat(3, minmax(0, 1fr)), which isn't quite the same. Items use line numbers (col-[1/3]), even when the CSS uses named areas.
Only in your own browser (local storage), so it's still there next time. Press Reset to clear it.