Tailwind Grid Generator
Set the number of columns for the base layout and for each Tailwind breakpoint, then choose a gap. The preview is a live responsive grid, so it changes column count as you resize the window, and the output is the matching Tailwind classes.
The classes use the same grid model as the W3C CSS Grid Layout Module Level 1. Everything runs in your browser; nothing is sent to a server.
grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3.grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}How to use it
- Set the base column count, which applies to the smallest screens.
- Set a column count for sm, md, lg or xl. Choose 0 to keep the layout from the previous breakpoint.
- Pick a gap from the Tailwind spacing scale.
- Copy the class string onto the grid container, or copy the CSS if you are not using Tailwind.
About the CSS behind it
A Tailwind grid is a plain CSS grid. grid sets display: grid, grid-cols-N sets grid-template-columns, and gap-N sets the gutter. The grid model is specified in the W3C CSS Grid Layout Module Level 1. The MDN reference for grid-template-columns explains the repeat() and minmax() functions that the classes use.
Breakpoints are min-width queries. The sm, md, lg and xl prefixes start at 640, 768, 1024 and 1280 pixels in Tailwind's default theme. A column count set for a breakpoint stays in effect until the next larger breakpoint sets another value.
The CSS panel shows the same layout as plain CSS, with a media query for each breakpoint, for projects that do not use Tailwind. For a fully custom layout, use the CSS grid generator to set row and column tracks.
Frequently asked questions
- Why does Tailwind use grid-cols-3 instead of a grid-template-columns value?
- Tailwind ships utilities for the common column counts, grid-cols-1 to grid-cols-12, and each one sets grid-template-columns to repeat(N, minmax(0, 1fr)). The minmax(0, 1fr) part stops long content from forcing a column wider than its share.
- How do the md: and lg: prefixes work?
- A prefix applies the class from that breakpoint upward. md:grid-cols-2 sets two columns at 768px and wider, and smaller screens keep the base value. Tailwind uses min-width media queries, so write the base layout first and add larger breakpoints after it.
- Why does the gap snap to a fixed set of values?
- Tailwind generates gap utilities for its spacing scale, such as gap-4 for 1rem. The generator offers those values, so the classes exist in a default Tailwind build. An arbitrary gap such as gap-[13px] also works if your design needs it.
- Do I need to add classes to the Tailwind content config?
- Only if you assemble the class names in code, for example by joining grid-cols- with a variable. Tailwind scans source files for complete class names, so write each class out in full, the way the generator output does, and it will be included.