Build a Tailwind CSS grid visually — columns, rows, gap and a mobile-first responsive pattern (grid-cols-1 sm:grid-cols-2 lg:grid-cols-N) — with the markup ready to copy.
Generated locally in your browser — your colors, settings and code never leave this page.
Grids you can see before you ship
Set columns, rows and gap and watch the cells rearrange; toggle the responsive option and the output becomes the mobile-first pattern that covers 90% of real grids: one column on phones, two from the sm breakpoint, your full count from lg. The generated markup includes item placeholders so the copy-paste actually runs.
Worked example
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div>Item 1</div>
…
</div>The detail that prevents blowouts
- grid-cols-N compiles to repeat(N, minmax(0, 1fr)) — that minmax(0,…) lets columns shrink below content width, so one long unbroken word cannot wreck the layout. Worth knowing when you write grid CSS by hand.
When to use it
- Card grids, image galleries, pricing tables, dashboard tiles — anywhere equal tracks are the goal.
Limitations
- Named template areas and asymmetric tracks (2fr 1fr) are hand-written territory — the CSS Grid Generator covers the named-areas page-shell pattern.
- Column spans (col-span-*) apply per item; add them to the generated placeholders as needed.
How to use the Tailwind Grid Generator
- Set columns, rows and gap — the preview grid rearranges live.
- Keep the responsive option on for the 1 → 2 → N column mobile-first pattern.
- Copy the container classes with ready-made item markup.
Frequently asked questions
What does grid-cols-3 actually generate?
grid-template-columns: repeat(3, minmax(0, 1fr)) — the minmax(0,…) part matters: it lets columns shrink below their content size, preventing the classic grid blowout from long words or wide images.
How does the responsive pattern work?
Mobile-first: grid-cols-1 applies everywhere, sm:grid-cols-2 upgrades from 640px, lg:grid-cols-N from 1024px. One line, no media queries written by hand.
Grid or flexbox for this layout?
Grid when you think in two dimensions or want equal tracks (galleries, dashboards); flexbox when items should size themselves along one line (toolbars, tag lists). The Flexbox Generator is one link away for comparison.
