Uwarp
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.

  1. Drag-and-drop editor: Place grid items on a live canvas and reposition them by dragging.
  2. Resize grid spans: Pull the bottom-right handle to span multiple columns or rows.
  3. Columns, rows, and gap: Tune track count and gutter size—the values flow into generated CSS.
  4. Copy HTML and CSS: One-click copy for markup and rules you can paste into components or stylesheets.
  5. Grid-column and grid-row output: Each item exports explicit placement lines like `grid-column: 1 / 3`.
  6. 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.

  1. Set columns, rows, and gap: Match the track count and gutter you want in the final stylesheet.
  2. Add items: Click + in an empty cell to insert a new grid child.
  3. Resize spans: Drag the corner handle to make an item cover more columns or rows.
  4. Reposition: Drag an item to another open area—the editor snaps to the grid.
  5. 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.

  1. Start with fewer tracks: A 3×3 grid is easier to prototype; add columns or rows once the layout reads well.
  2. Name classes in your project: Generated classes like `.item-x1` are placeholders—rename to match your BEM or component naming.
  3. Pair with minmax() later: The tool outputs `repeat(n, 1fr)`—swap in `minmax()` in your CSS when you need responsive floors.
  4. Learn flexbox separately: One-dimensional alignment belongs in Flexbox—try /flexbox-froggy for practice, not this grid tool.
  5. 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.

  1. Front-end developers: Prototype `grid-template` areas before committing to component CSS.
  2. Design handoff: Share exact `grid-column` / `grid-row` values with teammates.
  3. Landing page sections: Block out hero, sidebar, and footer regions on a track grid.
  4. Students: See how placement properties map to on-screen boxes.
  5. 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.

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

Technical details

How the grid code generator works.

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

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Programming.

View all Programming