Grid layout editor

Click + to add items, drag to move, resize from the bottom-right handle.

Grid settings

Columns, rows, and gap match the generated CSS.

Columns

Rows

Gap (px)

Generated HTML

<div class="grid-container">

</div>

Generated CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

Help Us Improve

—

(—)

CSS grid generator

Build CSS grid layouts visually—set columns, rows, and gap, drag items into place, resize spans, then copy HTML and CSS for your project.

What is a CSS grid generator?

A CSS grid generator is a visual grid builder that outputs `display: grid` CSS without hand-writing every `grid-column` and `grid-row` line. This online grid creator lets you set columns, rows, and gap, add items with + buttons, drag them into place, resize spans from the corner handle, and copy ready-to-paste HTML and CSS. It is a layout code generator for CSS Grid—not a drawing grid maker for art or a flexbox tool.

CSS grid generator features

Visual grid builder with copy-ready code output.

Drag-and-drop editor
Place grid items on a live canvas and reposition them by dragging.
Resize grid spans
Pull the bottom-right handle to span multiple columns or rows.
Columns, rows, and gap
Tune track count and gutter size—the values flow into generated CSS.
Copy HTML and CSS
One-click copy for markup and rules you can paste into components or stylesheets.
Grid-column and grid-row output
Each item exports explicit placement lines like `grid-column: 1 / 3`.
Browser-only
Layouts are built locally—nothing is saved to a server.

How to use the grid builder

Create a CSS grid layout in five steps.

Set columns, rows, and gap
Match the track count and gutter you want in the final stylesheet.
Add items
Click + in an empty cell to insert a new grid child.
Resize spans
Drag the corner handle to make an item cover more columns or rows.
Reposition
Drag an item to another open area—the editor snaps to the grid.
Copy code
Copy HTML for structure and CSS for `.grid-container` plus per-item placement rules.

Tips for CSS grid layouts

Get cleaner output from the grid creator.

01
Start with fewer tracks
A 3×3 grid is easier to prototype; add columns or rows once the layout reads well.
02
Name classes in your project
Generated classes like `.item-x1` are placeholders—rename to match your BEM or component naming.
03
Pair with minmax() later
The tool outputs `repeat(n, 1fr)`—swap in `minmax()` in your CSS when you need responsive floors.
04
Learn flexbox separately
One-dimensional alignment belongs in Flexbox—try /flexbox-froggy for practice, not this grid tool.
05
Reset often
Use Reset to clear items when exploring a new layout idea without stale spans.

Great for

Who benefits from a visual grid builder.

Front-end developers
Prototype `grid-template` areas before committing to component CSS.
Design handoff
Share exact `grid-column` / `grid-row` values with teammates.
Landing page sections
Block out hero, sidebar, and footer regions on a track grid.
Students
See how placement properties map to on-screen boxes.
Quick dashboards
Sketch card grids with mixed spans without a design file.

Why use this grid maker online

Benefits of a hosted CSS grid creator.

Faster than typing spans
Drag placement instead of guessing line numbers.
Honest CSS output
Standard `display: grid` rules—no framework lock-in.
No account
Free grid builder in the browser.
Live preview
Every change updates the canvas and code panels.
Clear scope
CSS Grid layouts only—not drawing grids, hex maps, or HTML forms.

Technical details

How the grid code generator works.

Output CSS: `display: grid`, `grid-template-columns`, `grid-template-rows`, `gap`, and per-item placement.
Placement model: 1-based `grid-column` and `grid-row` start/end lines (CSS Grid line syntax).
Collision handling: Moves and resizes are rejected when they would overlap another item.
Track limits: Up to 12 columns and 12 rows in the editor.
Processing: Client-side only—layouts are not uploaded.

Sources & References

Authoritative references on CSS Grid Layout specification, grid placement properties, and the visual builder approach this tool uses.

“CSS Grid Layout is a two-dimensional layout system for the web that enables precise control over rows and columns. It is defined in the CSS Grid Layout Module Level 1 specification.”
— W3C — CSS Grid Layout Module Level 1
CSS Grid Layout Module — W3C specification: This tool generates standard CSS Grid Layout code including `grid-template-columns`, `grid-template-rows`, `gap`, and per-item `grid-column` and `grid-row` placement properties as defined by the W3C specification. w3.org/TR/css-grid-1/
“Grid items can be positioned using line-based placement with the `grid-row-start`, `grid-row-end`, `grid-column-start`, and `grid-column-end` properties, specifying start and end grid lines by index.”
— MDN Web Docs — CSS Grid Layout: Line-based placement
CSS Grid line-based placement: Each grid item in the editor outputs explicit 1-based start/end line values (e.g. `grid-column: 1 / 3`) that map directly to the CSS Grid line-based placement model. developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Line-based_placement
“Visual CSS Grid generators allow developers to prototype layout structure by dragging items on a track grid, outputting production-ready CSS without hand-writing every line number.”
— Various — Front-end tooling resources
Visual grid builders for front-end development: This drag-and-drop grid creator provides live preview, collision detection, and one-click copy for HTML and CSS, making it faster to explore layout options than manually editing grid placement values. developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

Frequently Asked Questions

Quick answers about this tool—open a question to read more.