# 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.

> Page: https://ui.eneawork.it/blog/tailwind-grid-12-colonne
> Markdown: https://ui.eneawork.it/blog/tailwind-grid-12-colonne.md

*2026-11-01*

Una griglia a 12 colonne in Tailwind CSS è grid grid-cols-12 gap-4 sul contenitore, con col-span-* sui figli e varianti responsive per cambiare la larghezza delle celle.

La domanda «Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap» vale 405 voti su Stack Overflow, letta il 31 ottobre 2026 con la Stack Exchange API e registrata in docs/keyword-data.json. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, misurati e letti da /api/stats il 1 novembre 2026. Tailwind CSS è distribuito con licenza MIT: repository tailwindlabs/tailwindcss, file LICENSE.

## Come si scrive

Filtri ...

Le classi senza prefisso valgono da zero: col-span-12 è il layout mobile e lg:col-span-9 lo sovrascrive da 64rem. Dodici colonne si dividono in 2, 3, 4 e 6 parti senza frazioni.

## Perché dodici e non sedici

Dodici è il più piccolo numero divisibile per 2, 3, 4 e 6: mezzi, terzi, quarti e sesti restano interi. Con sedici colonne i terzi non esistono. Bootstrap usava dodici per lo stesso motivo, e la domanda del 2013 con 405 voti su Stack Overflow parla ancora di quel modello.

## Inizio e fine espliciti

Contenuto centrato

col-start-* e col-end-* posizionano una cella su tracce precise, senza padding finti. col-span-* è la scorciatoia: lg:col-start-4 lg:col-span-6 parte dalla traccia 4 e finisce alla 10.

## Sottogriglie allineate

Etichetta Valore

Con grid-cols-subgrid la griglia interna eredita le tracce del genitore, quindi le colonne restano allineate tra sezioni diverse. Senza, ogni griglia crea tracce proprie e i bordi si spostano di qualche pixel.

## La limitazione

La griglia è visiva, non semantica: col-start-* e order-* spostano un elemento senza cambiare l'ordine di lettura. Un lettore di schermo e il tasto Tab seguono il DOM. Se riordini le card, riordina il markup: la sequenza visiva e quella del codice devono coincidere.

## Dove continuare

Nel catalogo: la categoria grid, la guida ai layout bento e il blocco blog-01 di shadcn/ui blocks, che impagina le card a tre colonne. Il confronto tra flexbox e grid è in flexbox e grid per designer, la migrazione in da Bootstrap a Tailwind, il confronto tra framework in Tailwind contro Bootstrap.

## FAQ

### Perché usare 12 colonne invece di 16 o 24?

Dodici si divide per 2, 3, 4 e 6 senza frazioni. Sedici perde i terzi, ventiquattro produce classi più lunghe da leggere senza vantaggi pratici.

### La griglia a 12 colonne è obbligatoria in Tailwind?

No. Tailwind non impone nessuna griglia: grid-cols-12 è una utility come le altre e puoi usare cinque, sette o sedici colonne. Bootstrap imponeva dodici colonne, Tailwind no.

### Come si fa una griglia a 12 colonne responsive?

Si scrive col-span-12 come default e si sovrascrive con md:col-span-6 e lg:col-span-4. Le varianti sono mobile-first, quindi valgono da quella soglia in su.

### Serve un contenitore con max-width?

Sì, di solito mx-auto max-w-6xl px-4. La griglia occupa la larghezza del genitore, quindi il limite va messo fuori, non sulle celle.

### Come si allineano due griglie annidate?

Con grid-cols-subgrid sulla griglia interna, che eredita le tracce del genitore. Senza subgrid ogni griglia crea tracce proprie e i bordi non coincidono.