Sviluppo web
Griglia a 12 colonne con Tailwind
La griglia a 12 colonne in Tailwind è grid grid-cols-12 gap-4 sul contenitore e col-span-* sui figli, con soglie mobile-first e subgrid per allineare le sezioni.
In sintesi
- Dodici colonne si dividono per 2, 3, 4 e 6 senza frazioni.
- col-span senza prefisso è il layout mobile, le varianti lo sovrascrivono.
- La griglia è visiva: non cambia l'ordine di lettura del DOM.
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.
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.
Domande frequenti
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.