Build a responsive CSS Grid layout visually and get clean Tailwind CSS classes to copy straight into your project — no manual class-writing, no guessing at breakpoint syntax.
Columns
Pick a breakpoint tab, then set how many columns the grid should use from that screen width up.
Rows & Spacing
Grid Items
Click a block in the preview to edit its span
Click any block to select it, then set its column/row span on the left.
Full HTML snippet
Container classes only
How It Works
Every choice you make in the tool — column count, row count, gap, alignment, breakpoint overrides, and per-block spans — maps directly to a real Tailwind utility class. Set 4 columns on sm: and 2 on md: and the tool outputs sm:grid-cols-4 md:grid-cols-2 in the exact order Tailwind expects. Click a block and set its span, and the tool adds col-span-{n} or row-span-{n} only where a span is actually greater than 1, so your output never carries redundant classes. The live preview mirrors what the generated grid will look like, and the two code panels give you either the full HTML markup or just the container class string, depending on what you’re dropping into your project.
When to Use This
- Prototyping a layout fast — sketch a card grid, dashboard layout, or image gallery visually before writing a single line of markup in your actual project.
- Building responsive grids without memorizing breakpoint syntax — set column counts per breakpoint visually and let the tool handle the
sm:/md:/lg:/xl:prefixing correctly. - Adding a Tailwind grid to a WordPress build — if you’re hand-coding a block theme, a custom template, or a headless WordPress frontend with Tailwind, this gives you ready-to-paste classes without spinning up a local build just to test a layout.
Frequently Asked Questions
Does this work with Tailwind CSS v4?
Yes. The column classes this tool generates (grid-cols-1 through grid-cols-12) are core utilities in both Tailwind v3 and v4, so the output works unchanged whichever version your project runs.
How do I make a responsive grid in Tailwind CSS?
Set a different column count per breakpoint using the sm:, md:, lg:, and xl: prefixes on grid-cols-{n} — this tool generates that automatically when you set column counts on the breakpoint tabs.
Can I export plain CSS instead of Tailwind classes?
Not from this tool — it’s built specifically for Tailwind’s utility-class workflow. If you need raw grid-template-columns CSS, use a standard CSS Grid generator instead.