Tailwind grid generator
Columns at each breakpoint, the gap, or auto-fit with a minimum width — see the grid at any viewport width and copy the classes. Nothing leaves your browser.
Three grids that cover most pages
Cards: grid gap-6 md:grid-cols-2 lg:grid-cols-3 — one column on phones, two on tablets, three on desktop. Every features and pricing section in our templates is this.
Gallery: grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] — fills the row with as many 200px tiles as fit, no breakpoints.
Sidebar: grid gap-8 md:grid-cols-[240px_1fr] — a fixed rail and a fluid main column, stacked on phones.
Bound the number of columns to the content: six equal columns of text on a 1280px screen are 190px each and unreadable. Past four, switch to auto-fit with a sensible minimum.
Questions
What is the difference between fixed columns and auto-fit?
grid-cols-3 is always three columns, so you add md: and lg: variants for phones and tablets. repeat(auto-fit, minmax(240px, 1fr)) lets the browser fit as many 240px-minimum columns as the width allows — one class, no breakpoints. Use fixed columns when the count matters (pricing plans), auto-fit for galleries and card lists.
Which breakpoints does Tailwind use?
sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px — mobile first, so grid-cols-1 md:grid-cols-3 means one column below 768px and three from there up. Drag the width slider to see where yours change.
Do the classes work in v3 and v4?
Yes, all of them. The arbitrary auto-fit class needs Tailwind 3.0 or later.
Is anything uploaded?
No. Nothing leaves your browser.