Tailwind grid builder

← All tools

Set column counts per breakpoint, gap, and per-item spans. Preview simulates a chosen breakpoint with CSS Grid — copy utilities when it looks right.

~~~

Presets

Columns

Preview breakpoint

Showing columns for this simulation.

Preview

Click an item to edit its col-span-*.

Item span

~~~
Grid classes
HTML
Column counts and spans sync to the URL. Preview is CSS Grid, not live Tailwind responsive classes.
~~~
About this tool
Responsive Tailwind grids usually look likegrid grid-cols-1 sm:grid-cols-2 md:grid-cols-3. This tool builds that string (plus optional col-span-* on children) and lets you scrub breakpoints in the preview without resizing the browser.
The preview simulates column counts with CSS Grid — it does not load Tailwind at runtime. A col-span only works when it fits inside the active column count; spanning six columns in a three-column grid wastes space or wraps oddly. Gap utilities apply to both axes. Copy the grid class string and HTML once the layout looks right at each breakpoint you care about.
~~~
Read more