How do I create a CSS grid layout?

Set columns, rows, and gap, click + to add items, drag to move them, resize from the corner handle, then copy the HTML and CSS into your project.

Is this a grid maker for drawing?

No. This tool generates CSS Grid code for web layouts. For printable drawing grids or image overlays, use a dedicated art or photo grid tool instead.

Does this replace a flexbox generator?

No. Flexbox handles one-dimensional alignment along a single axis. This page outputs two-dimensional CSS Grid placement. For flexbox practice, see /flexbox-froggy.

What is the difference between grid maker and CSS grid generator?

Searchers use both phrases for the same task—building a track-based layout and exporting CSS. This page targets CSS Grid specifically with `grid-column` and `grid-row` output.

Can I use this as a grid calculator?

It helps you see how many tracks and spans you need visually, but it does not solve math homework or compute unrelated grid formulas—it exports layout CSS.

Are layouts saved online?

No. Copy your HTML and CSS before leaving the page if you need to keep a layout.

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;
}

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.

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