Web development
A 12-column grid with Tailwind
A 12-column grid in Tailwind is grid grid-cols-12 gap-4 on the container plus col-span utilities on the children, mobile-first.
Key points
- Twelve columns divide by 2, 3, 4 and 6 without fractions.
- col-span with no prefix is the mobile layout; variants override it.
- The grid is visual: it does not change the reading order of the DOM.
A 12-column grid in Tailwind CSS is grid grid-cols-12 gap-4 on the container, with col-span-* on the children and responsive variants to change the width of a cell.
How to write it
Filtri
...
Classes without a prefix apply from zero: col-span-12 is the mobile layout and lg:col-span-9 overrides it from 64rem. Twelve columns split into 2, 3, 4 and 6 parts without fractions.
Why twelve and not sixteen
Twelve is the smallest number divisible by 2, 3, 4 and 6: halves, thirds, quarters and sixths stay whole. With sixteen columns thirds do not exist. Bootstrap used twelve for the same reason, and the 2013 question with 405 votes on Stack Overflow still discusses that model.
Explicit start and end
Contenuto centrato
col-start-* and col-end-* place a cell on exact tracks, with no padding hacks. col-span-* is the shortcut: lg:col-start-4 lg:col-span-6 starts at track 4 and ends at track 10.
Aligned subgrids
Etichetta
Valore
With grid-cols-subgrid the inner grid inherits the tracks of its parent, so columns stay aligned across separate sections. Without it every grid creates its own tracks and the edges drift by a few pixels.
The limitation
The grid is visual, not semantic: col-start-* and order-* move an element without changing the reading order. A screen reader and the Tab key follow the DOM. If you reorder cards, reorder the markup: the visual sequence and the source sequence must match.
Where to continue
The catalogue holds the grid category, the guide to bento layouts and the blog-01 block from shadcn/ui blocks, which lays out cards in three columns. The flexbox and grid comparison is in flexbox and grid for designers, the migration in from Bootstrap to Tailwind, the framework comparison in Tailwind vs Bootstrap.
Frequently asked questions
Why use 12 columns instead of 16 or 24?
Twelve divides by 2, 3, 4 and 6 without fractions. Sixteen loses thirds, twenty-four produces longer class strings with no practical gain.
Is a 12-column grid mandatory in Tailwind?
No. Tailwind imposes no grid: grid-cols-12 is one utility among others, and you can use five, seven or sixteen columns. Bootstrap imposed twelve columns, Tailwind does not.
How do I make a 12-column grid responsive?
Write col-span-12 as the default and override it with md:col-span-6 and lg:col-span-4. The variants are mobile-first, so they apply from that size up.
Does the grid need a container with max-width?
Yes, usually mx-auto max-w-6xl px-4. The grid fills the width of its parent, so the limit belongs outside, not on the cells.
How do two nested grids line up?
With grid-cols-subgrid on the inner grid, which inherits the tracks of its parent. Without subgrid every grid creates its own tracks and the edges do not match.