CSS Grid & Flexbox Builder

Interactively design complex layouts and export the precise HTML, Vanilla CSS, Tailwind CSS, or Bootstrap code needed for your project.

CSS Layout Builder

Visually design CSS Grid and Flexbox architectures.

Container Settings

Columns 3

Rows 3

Gap 16px

Output Framework

Interactive Playground

Click blocks to select

HTML tailwind

<div class="grid grid-cols-3 gap-4">
  <div class="item ">Item 1</div>
  <div class="item col-span-2">Item 2</div>
  <div class="item row-span-2">Item 3</div>
  <div class="item ">Item 4</div>
  <div class="item ">Item 5</div>
</div>