Tailwind Grid Generator
Draw the layout. Copy Tailwind classes with every breakpoint prefix written.
<div class="grid grid-cols-1 grid-rows-[auto_auto_auto_auto_auto] gap-[16px] md:grid-cols-2 md:grid-rows-[auto_auto_auto_auto] lg:grid-cols-[220px_1fr_1fr] lg:grid-rows-[auto_1fr_auto]">
<div class="col-start-1 col-end-2 row-start-1 row-end-2 md:col-end-3 lg:col-end-4">Header</div>
<div class="col-start-1 col-end-2 row-start-2 row-end-3 md:col-end-3 lg:col-end-2">Nav</div>
<div class="col-start-1 col-end-2 row-start-3 row-end-4 lg:col-start-2 lg:col-end-3 lg:row-start-2 lg:row-end-3">Main</div>
<div class="col-start-1 col-end-2 row-start-4 row-end-5 md:col-start-2 md:col-end-3 md:row-start-3 md:row-end-4 lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-3">Aside</div>
<div class="col-start-1 col-end-2 row-start-5 row-end-6 md:col-end-3 md:row-start-4 md:row-end-5 lg:col-end-4 lg:row-start-3 lg:row-end-4">Footer</div>
</div>
Grid classes without the guesswork
A responsive Tailwind grid is easy to describe and fiddly to write: which col-start
at md:, which at lg:, and which classes can be dropped because the
smaller breakpoint already set them. Draw the layout here at each width and the Tailwind tab
writes only the classes that change.
01. Method
How to use it
-
Draw the layout
Drag across the grid to create areas. Each one becomes a div in the Tailwind output.
-
Set the breakpoints
The ruler starts on Tailwind's md (768px) and lg (1024px) screens. Move the playhead past a marker and rearrange.
-
Size the columns
Equal fr columns become grid-cols-N; anything else becomes an arbitrary value such as grid-cols-[220px_1fr_1fr].
-
Copy the classes
The Tailwind tab is open already. Every responsive prefix is written for you.
How the classes map to CSS
grid:display: gridgrid-cols-3:grid-template-columns: repeat(3, minmax(0, 1fr))grid-cols-[220px_1fr]:grid-template-columns: 220px 1frcol-span-2:grid-column: span 2 / span 2col-start-2 col-end-4:grid-column-start: 2; grid-column-end: 4gap-4:gap: 1remby defaultmd:: the class applies from 768px up
The full explanation of each column value, including why Tailwind wraps its columns in
minmax(0, 1fr), is in the
grid-template-columns guide.
Only the classes that change
Tailwind is mobile-first: an unprefixed class holds at every width until a prefixed one
overrides it. The output relies on that. If a column's position is the same at
md: and lg:, the lg: class is left out, so the class
list stays as short as you would write it by hand.
Line numbers instead of areas
Plain CSS can name regions with grid-template-areas, but
Tailwind has no utilities for it. The output places each item by grid line
(col-start-1 col-end-3) because every class is standard Tailwind with no
arbitrary properties. For named areas, use the CSS tab of the same editor; the
CSS grid generator opens on it.
Converting existing CSS
For grid CSS you already have, paste it into the CSS Grid visualizer to see and edit the layout, or run it through the CSS to Tailwind converter. Working in Bootstrap instead? The Bootstrap grid generator writes row and column markup.
02. Questions
Frequently asked questions
How do I make a grid in Tailwind CSS?
grid and a column count to the container, such as grid grid-cols-3 gap-4. Items fill the columns in order; add col-span-2 to one to make it two columns wide.How do I make a Tailwind grid responsive?
grid-cols-1 md:grid-cols-2 lg:grid-cols-4. Tailwind is mobile-first, so the unprefixed class applies everywhere and md: takes over from 768px up.How do I set custom column widths in Tailwind?
grid-cols-[220px_1fr_1fr]. Tailwind turns it into grid-template-columns: 220px 1fr 1fr.What does grid-cols-3 compile to?
grid-template-columns: repeat(3, minmax(0, 1fr)). The minmax(0, 1fr) lets columns shrink below their content, which stops a long word or wide image from overflowing the grid.Does Tailwind support grid-template-areas?
[grid-template-areas:'header_header'_'nav_main'], but it is hard to read. This generator places items with col-start/col-end and row-start/row-end instead, which is plain Tailwind.What happens with a breakpoint that is not a Tailwind screen?
min-[900px]:grid-cols-3, so any width works without editing your theme. Drag a breakpoint onto 640, 768, 1024, 1280 or 1536px to get the named sm: to 2xl: prefixes.