Developer

CSS Grid Generator

Build a CSS grid visually: set columns, rows and gaps, drag across cells to place items, then copy the HTML and CSS.

Loading interactive tool…

Embed this tool on your site

About this tool

The CSS Grid Generator turns a visual grid into working code. Choose 1 to 12 columns and 1 to 12 rows, give every track its own size (fr, px, %, auto, min-content or minmax()), and set separate column and row gaps. Then drag across the preview with a mouse, or tap a start cell and an end cell on a touch screen or with the keyboard, to create a named item that spans those cells. Rename items, remove them one at a time or clear them all, and watch the preview update live. The CSS output contains the parent rule with display: grid, grid-template-columns, grid-template-rows and gap, plus one rule per item with its grid-area line numbers; the HTML output contains the matching parent and child elements. A second mode builds the responsive repeat(auto-fill, minmax(Npx, 1fr)) column pattern for card grids that reflow without media queries. Everything runs in your browser.

Why use it

  • Visual layout: drag across the preview to create items that span columns and rows.

  • Clean output: grid-template-columns, grid-template-rows, gap and a grid-area for each item, ready to paste.

  • Any track size: fr, px, %, auto, min-content or minmax, with invalid sizes flagged.

  • Works with mouse, touch and keyboard.

  • Includes the responsive auto-fill pattern for card grids.

How to use

  1. Set the number of columns and rows, and the column and row gaps in pixels
  2. Type a size for each column and row, such as 1fr, 200px, 25%, auto or minmax(100px, 1fr)
  3. Drag across preview cells, or select a start cell and then an end cell, to add an item that spans them
  4. Rename items in the Items list, or remove ones you no longer need
  5. Click Copy CSS and Copy HTML to paste the layout into your project
  6. Switch Mode to Responsive auto-fill columns for a card grid that reflows by minimum column width

When it helps

  • Sketching a page layout with a header, sidebar and content area.
  • Building a dashboard or gallery grid with items that span several cells.
  • Learning how grid-area line numbers map to a layout.
  • Generating a responsive card grid with repeat(auto-fill, minmax()).

Frequently Asked Questions

Which track sizes can I use?
Any value the browser accepts in grid-template-columns, including fr, px, %, auto, min-content and minmax(). Invalid entries are outlined in red and fall back to 1fr in the output.
How do I make an item span several columns or rows?
Drag from the first cell to the last cell with a mouse. On touch screens or with the keyboard, select the start cell, then the end cell. The item covers the whole rectangle between them.
What CSS does it generate for each item?
Each item gets a class rule with grid-area: row-start / column-start / row-end / column-end using grid line numbers, with a comment noting how many columns and rows it spans.
Can I set different column and row gaps?
Yes. When both gaps match, the output uses the gap shorthand; when they differ, it writes column-gap and row-gap separately.
What happens to items when I reduce the column or row count?
Items that start outside the smaller grid are removed and items that extend past the edge are trimmed to fit.
Can I still build a responsive auto-fill grid?
Yes. Switch Mode to Responsive auto-fill columns to generate repeat(auto-fill, minmax(Npx, 1fr)) with a gap, and preview how many columns fit as the window changes.
Is my layout sent to a server?
No. The grid preview and the generated code are produced entirely in your browser.

Explore the category

CSS Transform Playground Combine translate, rotate, scale, and skew values with a live preview box and CSS export. Flexbox Playground Tune flex-direction, alignment, gap, and item counts while copying container CSS. CSS Filter Playground Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations. Box Shadow Generator Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview. Text Shadow Generator Stack up to three readable text shadows and export CSS for headings and hero type. Border Radius Generator Shape corners with unified or per-corner sliders and export shorthand border-radius CSS.
Flexbox vs Grid: When to Use Which CSS Layout System Flexbox and Grid are not competing technologies — they solve different layout problems. Knowing which to reach for makes your CSS cleaner an Apr 2026 · 9 min CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min

Glossary

Grid track
A column or row of a CSS grid, sized with values such as 1fr, 200px or minmax(100px, 1fr).
fr unit
A fraction of the free space in the grid container, shared between fr tracks.
grid-area
Shorthand for an item’s start row, start column, end row and end column lines, such as 1 / 1 / 2 / 3.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities