The Tailwind Grid Generator builds Tailwind CSS grid layouts visually. Choose your columns, rows, and gap, click to add items, then drag to move them and drag the corner to resize. The tool outputs the exact Tailwind utility classes for your layout — grid, grid-cols-*, grid-rows-*, gap-*, col-start-*, col-span-*, row-start-*, and row-span-*.
You can copy the markup as plain HTML (class="…") or as JSX (className="…") for React, so it drops straight into your components. It all runs in your browser — no build step, no sign-up.
How to use the Tailwind grid generator
- Set the columns, rows, and gap using the steppers.
- Click a “+” cell to add an item, then drag to move or resize it.
- Switch the output between HTML and JSX depending on your framework.
- Copy the Tailwind classes into your project, or Reset to start again.
The Tailwind grid classes it uses
- grid — sets display: grid on the container.
- grid-cols-{n} and grid-rows-{n} — define the number of equal columns and rows.
- gap-{n} — the spacing between cells (mapped from your pixel gap).
- col-start / col-span / row-start / row-span — position and size each item.
Frequently Asked Questions
What is a Tailwind grid generator?
It is a visual builder that outputs Tailwind CSS grid utility classes. You lay out columns, rows, and items on screen and it generates the grid, grid-cols-*, grid-rows-*, gap-*, and col/row span classes for you.
Can I copy the output as JSX for React?
Yes. Toggle the output to JSX and the classes are emitted using className instead of class, ready to paste into a React or Next.js component.
How is the gap value converted to a Tailwind class?
Your pixel gap is mapped to the closest Tailwind spacing class (for example 16px becomes gap-4). If there is no exact match, an arbitrary value like gap-[10px] is used.
What is the column and row limit?
The generator supports up to 12 columns and 6 rows, which keeps every class within Tailwind’s default grid utilities so no extra configuration is needed.
Is the Tailwind grid generator free?
Yes, it is completely free, requires no sign-up, and runs entirely in your browser.