CSS layout tools

CSS layout generator— See the layout before you copy it

Choose Grid or Flexbox, adjust the canvas, and inspect the generated HTML and CSS together.

Automatic generation

Layout canvas

Paint areaNew name

Choose the first cell, then the opposite corner.

Live preview

Generated code

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 16px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }
@media (max-width: 640px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas: "header" "sidebar" "main" "footer";
  }
}

Layout settings stay in this browser tab; no upload or saved history.

ColumnsRowsGap (px)

Column track 1Column track 2Column track 3Row track 1Row track 2Row track 3

Responsive presetPreview width

Code and preview are current.

When a page shell needs a header, sidebar and main region, a CSS layout generator makes the two-dimensional map visible before you write selectors. The sample has three rows and three columns so you can inspect named areas immediately.

For navigation bars or item rows, switch the same CSS layout generator to Flexbox. Your Grid settings remain available when you return; this is more useful than rebuilding a second page from scratch.

Why use this CSS layout generator

The canvas and the exported rules describe the same structure.

Keep Grid and Flex layouts together

Switch between a CSS Grid generator and a Flexbox generator without losing the other mode. A Grid page skeleton and a Flex item row can be compared in one workbench; each mode retains its own gap and alignment choices.

Grid page skeleton with a header, sidebar, main region and footer beside a row of four Flex items.

Mobile changes appear in the actual code

The responsive layout generator emits a real 640px media query. Desktop, tablet and mobile previews use the same HTML/CSS output, so a narrow preview is not merely a scaled picture.

Desktop three-column grid beside a narrow single-column stack of the same named areas.

Make the preview match the code

Choose the layout system

Use Grid for named page regions and Flexbox for a row or column of items. Switching modes preserves both sets of settings.

The first Grid example already has four rectangular named areas.

Edit tracks and regions

Change each Grid track in fr, px, auto or minmax units. Pick an area, then select opposite corners to paint one rectangle; nonrectangular regions are rejected.

Turning off automatic generation reveals Generate code and Ctrl/Cmd+Enter.

Check the narrow output

Set the preview to 390px and confirm the mobile stack. Copy CSS and HTML together, or download a standalone HTML file; exports stay disabled while settings are out of date.

The media query is included only when the mobile-stack preset is selected.

From geometry to usable markup

Named Grid regions

Build grid-template-areas visually. The output includes matching grid-area rules for each child, so the HTML and CSS refer to the same names.

Flex container controls

Set direction, wrapping, main-axis and cross-axis alignment, item count and gap. The live preview uses the browser’s actual layout engine.

Responsive HTML and CSS

A single mobile-stack preset adds a 640px media query and keeps the generated markup paired with the desktop rules.

What the generator will and will not emit

Regions must be rectangles: The grid-template-areas builder refuses overlapping, split or L-shaped names. CSS would ignore that declaration, so an invalid edit leaves the last valid map intact and disables export until resolved.
Track sizes are checked: Each row and column accepts standard track forms such as 1fr, 200px, auto and minmax(120px, 1fr). Unsupported text blocks generation rather than entering the stylesheet.
One responsive breakpoint: The preset stacks at 640px; tablet and desktop controls change preview width only. It does not create custom rules for each breakpoint, Tailwind classes, SCSS or React components.
Example content only: The HTML contains named Grid regions or numbered Flex items. It is a layout skeleton, not a parser for an existing page or a full site builder.

CSS layout generator questions

When should I use CSS Grid vs Flexbox?

Use Grid when rows and columns define a page structure; choose Flexbox when items flow along one axis. This CSS layout generator keeps both models on one page.

What is grid-template-areas and why use it?

A named area is a map of cells in grid-template-areas. Repeating its name across adjacent cells makes one rectangular region, and the child receives a matching grid-area rule.

What is the difference between fr, px and auto track sizes?

fr divides remaining space, px fixes a track width, and auto follows content size. The CSS Grid generator validates these values before exporting.

Why do grid areas have to be rectangular?

CSS requires one filled rectangle per area name. This canvas rejects an L-shaped or separated region rather than producing a declaration the browser would ignore.

How do I make a CSS Grid layout responsive?

Select mobile preview and leave the mobile-stack preset on. The resulting CSS layout generator output includes @media (max-width: 640px) and stacks the same HTML children.

Need another layout case?

Build with the CSS layout generator

Start from the sample, adjust the actual browser preview, then copy the generated CSS and HTML into your project.

Back to the canvas Browse all tools

CSS layout generator— See the layout before you copy it