Generate Tailwind CSS grid layouts visually. Set columns, rows, gaps, and item placement. Preview live and copy ready-to-use Tailwind grid classes instantly.
Choose the number of grid columns (1–12).
Set the gap between grid items.
Configure span settings for special items (full-width, multi-column).
Add responsive breakpoints (sm, md, lg) with different column counts.
Copy the generated Tailwind HTML.
The responsive card grid: grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6. This gives 1 column on mobile, 2 on tablet, and 3 on desktop.
Use col-span-2 through col-span-12, or col-span-full for full-width items.
Grid is for 2D layouts (rows AND columns simultaneously). Flexbox is better for 1D layouts (either a row OR a column). Cards, dashboards, and galleries use Grid; navbars, buttons, and form rows use Flex.
CSS Grid is the most powerful layout system available in CSS — it lets you define both rows and columns simultaneously, place items precisely, and build complex layouts that Flexbox alone can't handle. Tailwind wraps Grid's power in simple utility classes.
Defining the grid container:
<div class="grid grid-cols-3 gap-4">
<!-- 3-column grid with 1rem gap -->
</div>
Column presets:
| Class | CSS |
|---|---|
grid-cols-1 | Single column |
grid-cols-2 | Two equal columns |
grid-cols-3 | Three equal columns |
grid-cols-4 to grid-cols-12 | Up to 12 equal columns |
grid-cols-none | No column template |
Row presets:
| Class | CSS |
|---|---|
grid-rows-1 | grid-template-rows: repeat(1, minmax(0, 1fr)) |
grid-rows-2 to grid-rows-6 | Up to 6 rows |
<div class="grid grid-cols-3 gap-4"> <!-- gap on all sides -->
<div class="grid grid-cols-3 gap-x-4"> <!-- column gap only -->
<div class="grid grid-cols-3 gap-y-6"> <!-- row gap only -->
<!-- Span 2 columns -->
<div class="col-span-2">
<!-- Span full width -->
<div class="col-span-full">
<!-- Span 2 rows -->
<div class="row-span-2">
<!-- Start at column 2 -->
<div class="col-start-2">
The real power of Tailwind grid comes with responsive modifiers:
<!-- 1 col mobile, 2 cols tablet, 4 cols desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
This is the standard card grid pattern used on almost every modern website.
Masonry-approximation (unequal heights):
Use grid-rows-[masonry] with Subgrid (Tailwind v4) or JavaScript-enhanced CSS.
Holy Grail Layout:
<div class="grid grid-cols-[200px_1fr_200px] grid-rows-[auto_1fr_auto] min-h-screen">
<header class="col-span-3">...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer class="col-span-3">...</footer>
</div>
Auto-fill responsive grid:
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4">
(Use arbitrary values for auto-fill since Tailwind doesn't have a preset for it)
Looking for a more detailed deep-dive and advanced tips?
Read Full Article on our BlogYour data never leaves this device. All processing is handled locally by JavaScript.
We are currently building this tool. Check back shortly!