Lintel — Visual Bento Layout Builder

Hero

Feature

Stat

Banner

Click ghost tile to add · Drag handle to move · Corner handle to resize · Scroll on selected cell to resize

Grid is full — expand rows or columns to add more cells

Export

<div class="grid grid-cols-4 grid-rows-3 gap-4">
  <div class="col-start-1 col-span-2 row-start-1 row-span-2 p-3 flex flex-col gap-2 rounded-2xl" style="background-color: #171717">
    Hero
  </div>
  <div class="col-start-3 col-span-1 row-start-1 row-span-2 p-3 flex flex-col gap-2 rounded-2xl" style="background-color: #171717">
    Feature
  </div>
  <div class="col-start-4 col-span-1 row-start-1 row-span-1 p-3 flex flex-col gap-2 rounded-2xl" style="background-color: #171717">
    Stat
  </div>
  <div class="col-start-4 col-span-1 row-start-2 row-span-1 p-3 flex flex-col gap-2 rounded-2xl" style="background-color: #171717">
    Stat
  </div>
  <div class="col-start-1 col-span-4 row-start-3 row-span-1 p-3 flex flex-col gap-2 rounded-2xl" style="background-color: #171717">
    Banner
  </div>
</div>

Grid classes with inline background styles

Best on a larger screen