📦

Visual CSS Grid & Flexbox Canvas

Dev Core

Build Grid and Flexbox layouts visually with live preview, item placement controls, and production-ready CSS + HTML export. 100% client-side.

Interactive CSS codegen · live preview

Build Grid and Flexbox layouts visually, tune tracks and item placement, then copy production-ready CSS and HTML — 100% client-side.

Live preview

Generated CSS

.layout-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(72px, auto));
  gap: 12px;
  padding: 16px;
  justify-items: stretch;
  align-items: stretch;
  min-height: 320px;
}

.layout-item-1 {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

.layout-item-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.layout-item-3 {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
}

.layout-item-4 {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

/* HTML */
<div class="layout-container">
  <div class="layout-item layout-item-1">Header</div>
  <div class="layout-item layout-item-2">Sidebar</div>
  <div class="layout-item layout-item-3">Main</div>
  <div class="layout-item layout-item-4">Footer</div>
</div>

Container

Items (4)

Click a preview item to edit placement.

Sponsored