Grid Generator
Choose how many columns and rows you need, tune the gaps, and copy the Tailwind grid classes. Switch to auto-fit for a layout that adapts without breakpoints.
grid grid-cols-3 grid-rows-2 gap-4
<div class="grid grid-cols-3 grid-rows-2 gap-4"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <!-- ... --> </div>
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
column-gap: 1rem;
row-gap: 1rem;
}Frequently asked questions
How do I make a 3 column grid in Tailwind?
Use grid grid-cols-3 gap-4. For a layout that is one column on phones and three on larger screens, write grid grid-cols-1 md:grid-cols-3 gap-4.
What does auto-fit with minmax do?
grid-cols-[repeat(auto-fit,minmax(200px,1fr))] creates as many columns as fit, each at least 200px wide and sharing the leftover space. The grid reflows on its own, so you do not need breakpoint classes.
What is the difference between gap-x and gap-y?
gap-x sets the space between columns and gap-y sets the space between rows. gap sets both at once. When the two values match, this tool outputs the shorter gap-N.
Can I change the number of columns per breakpoint?
Yes. Add a prefix like md: or lg: to the column class, for example grid-cols-2 lg:grid-cols-4. Generate the base class here, then add the prefixes you need.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.