Combinare Flexbox e Grid

Flexbox e Grid non sono rivali: sono progettati per funzionare insieme. Il modello tipico consiste nell'usare CSS Grid per la struttura generale della pagina e Flexbox all'interno di ogni area della griglia per disporre i contenuti del componente.

Definisca lo scheletro generale della pagina con Grid. All'interno di ogni area della griglia, usi Flexbox per la disposizione a livello di componente: i link di navigazione in una riga, il contenuto di una scheda in una colonna.

Lo schema classico: Grid per il layout delle schede, Flex per il layout interno di ogni scheda. In questo modo le schede si allineano nella griglia, mentre i contenuti interni (immagine, titolo, corpo e piè di pagina) vengono disposti correttamente in pila.

Una barra di navigazione comune combina entrambi gli strumenti. La barra stessa è un contenitore flex per il logo e i link. La sezione dei link può essere a sua volta un altro contenitore flex. Un mega-menu può usare Grid per un layout su più colonne.

Oggi il layout «Holy Grail» (intestazione, parte centrale su tre colonne e piè di pagina) si realizza facilmente con Grid. Le tre colonne — barra laterale sinistra, area principale e barra laterale destra — sono colonne Grid; il contenuto di ciascuna usa Flexbox.

Sia Grid sia Flexbox possono centrare perfettamente i contenuti. Grid: place-items: center (abbreviazione di align-items + justify-items). Flex: justify-content: center; align-items: center.

Su dispositivi mobili: una sola colonna, con la navigazione in alto. Da tablet in su: barra laterale e contenuto affiancati. Grid rende questa struttura dichiarativa: modifichi template-areas in una media query.

Un micro-layout molto comune consiste nel disporre un'icona accanto al testo. Flexbox è perfetto perché si tratta di una singola riga con allineamento.

Scelga Grid quando ragiona in termini di righe E colonne, quando deve allineare gli elementi su più tracce o quando sta costruendo lo scheletro di una pagina. Scelga Flex quando ragiona in un'unica direzione, quando gli elementi devono restringersi ed espandersi o quando sta disponendo una riga di pulsanti o una pila di elementi.

A volte un semplice elemento block con max-width e margin: auto è preferibile a una griglia complessa. Non tutti i layout richiedono Grid. Usi lo strumento più semplice in grado di svolgere il lavoro.

In DevTools, faccia clic sui badge grid/flex nel pannello Elements per sovrapporre le linee della griglia o i contorni degli elementi flex. In questo modo la struttura invisibile del layout diventa visibile, rendendo molto più semplice diagnosticare i problemi di allineamento.

Quale combinazione di strumenti di layout è più comune rispettivamente per i layout a livello di pagina e a livello di componente?

Grid e Flexbox sono complementari. Usi Grid per la struttura bidimensionale della pagina. Usi Flexbox per i contenuti interni unidimensionali dei componenti. place-items: center su una griglia centra ogni elemento. flex-direction: column + flex: 1 sul corpo di una scheda spinge i piè di pagina verso il basso. Esegua il debug con i badge di sovrapposizione di DevTools.