Is My Input Uploaded?

No. Processing runs locally in this browser tab. These tools do not upload or persist your input.

Copy or download layout-only CSS and HTML, download a standalone styled demo, or save an editable JSON layout project. The PDF option is an image-only visual code report.

CSS Grid & Flexbox Layout Generator

Build responsive grid and flex layouts with live previews, per-item sizing and clean HTML/CSS exports.

Preset

Container

Layout MethodAuto-Fit ColumnsColumns

Column Gap (px)Row Gap (px)Padding (px)Min. Height (px)

Justify ContentAlign Items

Responsive Layout

Use A Mobile BreakpointBreakpoint (px)Mobile Columns

Numeric controls accept whole numbers within their stated limits. An incomplete or out-of-range edit keeps the last valid preview.

Live Layout

Viewport

The preview uses real CSS at the selected viewport width. Wide previews scroll horizontally. Demo colors are illustrative; exported CSS contains layout rules only.

Items & Order

Selected Item TextAlign SelfColumn SpanRow Span

Drag items or use Move Earlier / Later. Exported HTML follows this order. Auto-fit uses single-column spans; the mobile rule resets column spans to one.

CSS Code

.layout {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(80px, auto);
  column-gap: 16px;
  row-gap: 16px;
  padding: 24px;
  min-height: 360px;
  justify-content: start;
  align-items: stretch;
}

.layout > .layout-item {
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
}

.layout > .item-1 {
  grid-column: span 1;
  grid-row: span 1;
  align-self: auto;
}

.layout > .item-2 {
  grid-column: span 1;
  grid-row: span 1;
  align-self: auto;
}

.layout > .item-3 {
  grid-column: span 1;
  grid-row: span 1;
  align-self: auto;
}

.layout > .item-4 {
  grid-column: span 1;
  grid-row: span 1;
  align-self: auto;
}

.layout > .item-5 {
  grid-column: span 1;
  grid-row: span 1;
  align-self: auto;
}

.layout > .item-6 {
  grid-column: span 1;
  grid-row: span 1;
  align-self: auto;
}

@media (max-width: 640px) {
  .layout {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .layout > .layout-item {
    grid-column: span 1;
  }
}

Grid & Flexbox Quick Reference

Grid Tracks & Spans: Columns define the grid tracks. A span lets an item occupy several tracks; this builder limits it to the available column count.
Auto-Fit: Creates as many columns as fit the container, using the minimum track width. Empty tracks collapse and the remaining tracks share the space.
Flex Direction & Wrapping: Direction chooses the main axis. Wrapping lets items move to another line when their basis and gap no longer fit.
Justify Content: Distributes leftover space along the flex main axis, or across the grid's inline axis. Flexible items may consume that space first.
Align Items & Align Self: Align Items controls the cross-axis position of children. Align Self overrides it for one item; Stretch fills the available space.
Grow, Shrink & Basis: Basis is an item's starting size. Grow shares surplus space; Shrink shares the shortage in proportion to basis and shrink factor.
Gaps & Padding: Row and column gaps separate items. Padding adds space between the items and the container edge; it does not add an outside margin.
Responsive Rules: The mobile breakpoint uses viewport width, not container width. Preview and exported demo use the same media query and layout rules.

Grid arranges rows and columns; Flexbox arranges items along one main axis. Fractional grid tracks usually fill available width, so Justify Content may show little change. Reverse flex directions change visual order, not reading order. Test your real content, keyboard navigation and target browsers before publishing.

Loading Tool…

What Is the CSS Grid & Flexbox Layout Generator?

Build responsive grid and flex layouts with live previews, per-item sizing and clean HTML/CSS exports.

How It Works

Start from cards, sidebar, toolbar or auto-fit presets. Adjust spacing, alignment and a mobile breakpoint; select items to change grid spans or flex growth, shrinkage and basis. Reorder items by dragging or accessible move buttons. Preview phone, tablet and desktop widths, then export CSS, HTML or a standalone demo.

When to Use It

Prototyping responsive interfaces and learning how grid and flex properties interact. JSON project import/export keeps the layout editable. Demo colors are separate from the generated layout CSS, so it fits your existing design system.

Frequently Asked Questions

Is My Input Uploaded?: No. Processing runs locally in this browser tab. These tools do not upload or persist your input.
What Can I Export?: Copy or download layout-only CSS and HTML, download a standalone styled demo, or save an editable JSON layout project. The PDF option is an image-only visual code report.

Found an issue? Send Feedback. See our data sources and update policy for tools that depend on changing information.