Griglie CSS per layout complessi
CSS Grid ha cambiato il modo in cui penso i layout. Non più approssimazioni con float o flex, ma un sistema bidimensionale vero.
La distinzione fondamentale che molti non capiscono: Flexbox è per layout monodimensionali (una riga o una colonna), Grid è per layout bidimensionali (righe e colonne insieme). Non sono alternative — sono strumenti per problemi diversi. Usare Flex per un grid layout è come usare un martello per avvitare: funziona ma male.
Il pattern che uso di più è grid-template-areas per layout a pagina intera. Definire le aree nominalmente ('header', 'sidebar', 'content', 'footer') rende il CSS autodescrittivo e facilissimo da modificare. Cambiare il layout per mobile diventa scrivere un nuovo grid-template-areas nella media query, senza toccare i componenti.
subgrid è la feature più sottovalutata di CSS Grid. Permette a un figlio in una griglia di partecipare alla griglia del genitore, risolvendo il problema dei form con label e input allineati across righe diverse. Senza subgrid, questo richiedeva JavaScript o hack CSS. Oggi funziona in tutti i browser moderni ed è la soluzione elegante.