Tailwind grid generator

Build responsive CSS grid layouts visually, tweak spans and gaps, then copy clean Tailwind code in JSX or HTML.

1

Code output

<div className="grid grid-cols-5 grid-rows-5 gap-4">
  <div className="col-span-1">1</div>
</div>

Selection

Click a block to edit

Ready-made layouts

Click a layout to load it into the grid above.