← Tutti gli episodi
Copertina di I layout nativi: Flexbox e Grid
Stagione 8 · Episodio 009

I layout nativi: Flexbox e Grid

24 agosto 2026 5:44
0:00 5:44

Ciao, e benvenuto nella nona puntata dell'ottava stagione. Per tutta questa stagione abbiamo raccontato una lunga fatica: layout costruiti piegando strumenti nati per altro, prima le tabelle, poi i float, tenuti insieme da trucchi tramandati. Oggi arriviamo al momento liberatorio, la svolta tecnica che pose fine a decenni di espedienti: l'arrivo di strumenti nati apposta per il layout. Finalmente il CSS ricevette il potere di disporre gli elementi in modo diretto, logico e potente. È l'episodio in cui, dopo tanta sofferenza, le cose cominciano davvero a funzionare bene.

Ricapitoliamo la lunga assurdità, perché renda giustizia al sollievo. Per costruire un semplice layout a colonne, per anni gli sviluppatori avevano dovuto usare uno strumento nato per far scorrere il testo attorno alle immagini, combattendo con contenitori che collassavano e incollando formule magiche. Non esisteva, nel CSS, un modo per dire semplicemente "disponi questi elementi in fila, distribuiti così". Bisognava ottenere quel risultato di sbieco, aggirando la mancanza con l'ingegno. Era una situazione paradossale: il layout, la cosa più basilare del design, era la più difficile e artigianale da ottenere.

La prima grande liberazione arrivò con uno strumento pensato per disporre elementi lungo una linea, in una direzione: in fila orizzontale, o in colonna verticale. Con esso, finalmente, potevi dire in modo diretto e semplice le cose che prima richiedevano trucchi: "metti questi elementi in fila", "distribuiscili con spazi uguali tra loro", "centrali sia in orizzontale che in verticale". Quel centrare verticalmente, in particolare, era stato per anni uno dei problemi più frustranti e ridicoli del CSS, qualcosa che sembrava banale e invece richiedeva contorsioni. Con il nuovo strumento, diventava una singola, ovvia istruzione. Fu un sollievo quasi commovente per chi aveva vissuto l'era dei trucchi.

Ma la rivoluzione più grande arrivò con un secondo strumento, ancora più potente, pensato per costruire vere e proprie griglie a due dimensioni, con righe e colonne insieme. Se il primo strumento gestiva una direzione, questo gestiva l'intero piano. Potevi disegnare la struttura di una pagina intera, testata, barra laterale, contenuto centrale, piè di pagina, definendo direttamente la griglia e dicendo a ogni pezzo quale zona occupare. Era esattamente lo strumento che era mancato per vent'anni: un modo nativo, diretto e comprensibile per costruire layout bidimensionali, senza piegare nulla, senza trucchi. Il layout, finalmente, aveva il suo strumento vero.

Voglio che tu colga la portata di questo cambiamento, perché è il cuore della puntata. Cose che prima richiedevano ore di lotta, trucchi oscuri e conoscenze arcane, ora si ottenevano con poche istruzioni chiare, che dicevano esattamente ciò che volevi. Il divario tra l'intenzione, "voglio queste tre colonne", e la sua realizzazione, si era ridotto quasi a zero. Il layout smetteva di essere una battaglia e diventava una conversazione diretta con il browser. Per chi aveva imparato a costruire nell'era dei float, provare questi nuovi strumenti fu come passare dallo scavare con le mani all'avere una pala: la stessa fatica di prima, svolta in una frazione del tempo.

Nello stesso periodo arrivò un'altra conquista che chiude un cerchio di questa stagione. Ricordi che i preprocessori erano stati amati soprattutto perché permettevano di dare un nome ai valori e riusarli, per esempio un colore definito una volta e richiamato ovunque? Ebbene, quella capacità entrò finalmente nel linguaggio dello stile stesso, nativamente, senza bisogno di strumenti esterni. Fu la conferma di quello schema che avevamo notato: i preprocessori avevano fatto da laboratorio, dimostrando cosa serviva, e il linguaggio ufficiale aveva assorbito le idee migliori. Il CSS stava diventando, da solo, potente come lo avevano reso gli strumenti esterni.

C'è una riflessione importante in tutto questo, sul perché ci sia voluto così tanto. Questi strumenti così comodi non arrivarono in fretta: furono progettati, discussi e affinati con cura per anni prima di essere pronti e supportati ovunque. Può sembrare lento, e in parte lo fu, ma c'è un motivo profondo: il Web è una piattaforma condivisa da tutta l'umanità, e ciò che vi si aggiunge deve durare per sempre e funzionare ovunque. La lentezza è il prezzo della stabilità e dell'universalità. Riprendo un tema di questa stagione: gli standard condivisi richiedono pazienza, ma regalano un fondamento su cui si può contare per decenni.

E qui si vede il senso di tutta la fatica raccontata finora. Le tabelle, i float, i trucchi non furono tempo sprecato: furono il modo in cui la comunità capì, sul campo, cosa serviva davvero. Ogni frustrazione dell'era dei float insegnava esattamente quale strumento mancava, e quegli strumenti, quando arrivarono, furono progettati proprio per risolvere quelle frustrazioni precise. Il dolore del passato aveva plasmato la soluzione del futuro. È una delle cose più belle nella storia della tecnologia: le difficoltà di un'epoca diventano il progetto della successiva.

Per oggi ci fermiamo qui. Dopo decenni di layout costruiti piegando strumenti nati per altro, arrivarono finalmente strumenti nativi pensati apposta: uno per disporre elementi lungo una linea, che rese banale persino il temuto centrare verticalmente, e uno per costruire griglie a due dimensioni, lo strumento mancato per vent'anni. Insieme al dare nomi ai valori nativamente, il CSS diventò da solo potente come gli strumenti esterni. La fatica del passato aveva plasmato queste soluzioni. Nella prossima e ultima puntata arriviamo al presente: la standardizzazione del design e i design system. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.