Skip to main content
DevStackKit
All tools

CSS Grid Generator

Design a CSS Grid layout visually: set columns, rows and gap, drag across cells to draw named areas, and copy the CSS and HTML. Free and private.

More options

Grid: drag across cells to draw an area

  • rows 1–1, columns 1–3
  • rows 2–3, columns 1–1
  • rows 2–3, columns 2–3

CSS

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px;
grid-template-areas:
"header header header"
"sidebar main main"
"sidebar main main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

Shortcuts: Ctrl+Enter run · Ctrl+Shift+C copy result · / search (use ⌘ on Mac)

Next steps

Done here? Use the Send to… menu on the result to carry it on to CSS Beautifier or CSS Minifier.

Free Online CSS Grid Layout Generator

Set the number of columns and rows, then drag across the grid to draw named areas such as header, sidebar and main. Copy the CSS and the matching HTML. It gives developers a quick browser-based way to solve a focused css grid generator task before moving the result into a project.

How to design a layout

Choose columns, rows and the gap. In the grid, press on a cell and drag to another cell to make an area. Name each area in the list underneath. The CSS and HTML update as you work.

Using the code

Paste the CSS into your stylesheet and the HTML into your page. Each area becomes one element with its own grid-area.

Common mistakes

  • Leaving cells with no area: they stay empty (shown as a dot in the template).
  • Using the same name for two areas: each name must be unique, because a name stands for one rectangle.

Frequently asked questions

How do I draw an area?
Press on a cell, drag to another cell and release. The rectangle you covered becomes a named area. You can rename it or remove it in the list below the grid.
What is grid-template-areas?
A way to describe a layout with names: each row is a line of names, and an element placed with grid-area: name fills that part. It makes page layouts easy to read and change.
Can areas overlap?
Not with named template areas: every cell belongs to at most one area, and areas must be rectangles. The tool refuses an overlap and says which cells clash.
How are the column sizes written?
By default every column is 1fr, an equal share. Under More options you can write your own sizes, for example 240px 1fr or minmax(200px, 1fr) 2fr.
How do I use this css grid generator tool?
Use the interactive controls above; processing stays in your browser and the result is intended as a practical starting point for development work.

More Frontend & Design

User-Agent ParserSee which browser and device a visitor usesSVG OptimizerMake SVG images smallerColor ConverterConvert colours between HEX, RGB and HSLColor Blindness SimulatorSee how colour-blind people see your designCSS Effects GeneratorCreate gradients and shadows visuallyMeta Tag / Open Graph PreviewPreview how your page looks on Google and socialImage Resizer / CropperResize photos, including passport sizeBase64 Image ConverterTurn an image into text code, and back

View all Frontend & Design tools →