Interactive Layout Builder

Build a layout by splitting boxes with the + buttons. When it looks right, copy the code.

Build the layout

Div ial

Tip: Split a box with +. Top/bottom splits into rows, left/right splits into columns.

Code output

<div className="flex-1 bg-gray-100 border border-gray-300 rounded p-4 min-h-[100px] flex items-center justify-center">
  <span className="text-gray-600 text-sm">Your content</span>
</div>

This updates as you build. Copy it into your project and tweak spacing/breakpoints there.

Quick guide

Split Boxes

Click + on a box to split it. Top/bottom splits into rows, left/right splits into columns.

Remove Boxes

Click × to remove a box. The remaining space collapses automatically.

Export Code

Pick JSX+Tailwind or HTML+CSS, copy, paste into your project, tweak as needed.

About this tool

This is a quick, no-friction way to sketch flexbox-based layouts. Split boxes until the structure feels right, then export clean HTML/CSS or JSX/Tailwind.

Key Features

  • Simple box-splitting workflow (no learning curve)
  • Nested layouts (split inside splits)
  • Live code output as you build
  • Export HTML/CSS or JSX/Tailwind
  • Copy/paste friendly
  • Runs in the browser (no installs)

Perfect For

  • Quick layout prototypes
  • Drafting a landing page structure
  • Planning a dashboard grid
  • Explaining a layout idea to a teammate
  • Turning a sketch into starter code

A couple quick tips

  • Start simple, then split again where you actually need it.
  • Use nesting for “sidebar + main” patterns.
  • Export early—then fine-tune spacing and breakpoints in your codebase.
  • Flip between formats if you’re comparing Tailwind vs plain CSS.