Con Flexbox puoi organizzare bene una riga o una colonna. Poi arriva quel layout con elementi larghi, elementi alti, card che si incastrano e una struttura che deve cambiare su tablet. A quel punto continuare ad aggiungere righe annidate è un po’ come risolvere un trasloco infilando tutto nello sgabuzzino: all’inizio sembra funzionare.

In questa parte affrontiamo CSS Grid in Divi 5 come un sistema bidimensionale. Vedremo la relazione fra contenitore e figli, i template di struttura, le regole di offset e gli override responsive. L’obiettivo non è copiare una composizione precisa, ma capire come costruire griglie che restano leggibili anche quando il contenuto cambia.

Se devi ancora installare Divi, nella pagina trovi la sezione dedicata. Se invece vuoi confrontare subito i due sistemi di layout, puoi partire dalla guida su quando usare Grid o Flexbox.

Capire il rapporto fra contenitore Grid e figli

Grid lavora su due livelli. Il contenitore definisce colonne, righe, spazi e regole di allineamento; i figli occupano le celle e possono estendersi su più tracce. Nel Visual Builder puoi applicare Grid a sezioni, righe, colonne, gruppi e agli elementi supportati dalla struttura annidata.

Apri una riga con sei colonne e cambia lo stile di layout da Flex a Grid. Imposta prima sei colonne, poi riducile a tre. I sei elementi non spariscono: si distribuiscono sulla nuova struttura. Questa prova rende visibile il principio più importante: la griglia appartiene al genitore, mentre le colonne Divi sono i figli che vi entrano.

Nelle opzioni Layout del contenitore trovi numero e larghezza delle colonne, altezza delle righe, gap, densità, direzione e allineamenti. Nelle opzioni di dimensionamento del figlio trovi invece span, posizione iniziale e finale, Align Self e Justify Self. La guida al sistema CSS Grid di Divi 5 approfondisce questi controlli con esempi più generali.

Usare i template di struttura senza perdere il controllo

I template di struttura sono configurazioni pronte che impostano in un colpo solo tracce, gap e talvolta regole di posizionamento. Dal contenuto della riga scegli Apply Structure Template e prova un modello Multi-Row. Poi apri le impostazioni: il template non è magia, è semplicemente una serie di valori che puoi leggere e modificare.

Questo passaggio è utile perché ti mostra come una composizione visiva viene tradotta in regole. Una griglia uniforme a tre colonne può funzionare per servizi, articoli o prodotti. Ma non accettare automaticamente gap e misure predefiniti: collegali alle variabili di design del sito, così la griglia parla la stessa lingua del resto del progetto.

Il template è un punto di partenza. Se diventa un oggetto intoccabile, hai soltanto spostato il problema. Cambia un valore alla volta, osserva il risultato e usa nomi amministrativi comprensibili. Quando tornerai sul layout, “griglia servizi desktop” sarà più utile di “riga copia 7”.

Creare pattern ripetuti con le Grid Offset Rules

Le regole di offset applicano una proprietà ai figli in base alla loro posizione. Una regola 4n+2, per esempio, intercetta il secondo elemento e poi ogni quarto elemento successivo. Se le assegni Column Span 2, quegli elementi occuperanno due colonne. Una seconda regola 4n+3 può creare un ritmo alternato.

La forza di questo metodo emerge con contenuti dinamici. Non stai dicendo “allarga la card numero sei” una volta per tutte; stai definendo una logica che continua a funzionare quando il Loop Builder restituisce più elementi. Naturalmente una regola elegante sulla carta può produrre buchi o ordini confusi con contenuti reali. Provala con quantità diverse.

Per un effetto masonry puoi combinare Row Span e Column Span: il primo elemento di ogni gruppo diventa più alto, l’ultimo più largo. Mantieni però l’ordine del contenuto comprensibile. La griglia può cambiare l’aspetto, ma non dovrebbe trasformare la lettura in una caccia al tesoro.

Quando il numero degli elementi è fisso, puoi anche assegnare span e posizioni direttamente ai singoli figli. È una scelta sensata per una composizione editoriale stabile, meno per una raccolta che crescerà nel tempo. Confronta sempre il costo futuro: una regola generale è più astratta da impostare, ma evita di ritoccare ogni nuova card. Se il layout deve controllare soprattutto una direzione, torna invece ai principi di Flexbox; usare Grid ovunque non rende automaticamente il progetto più ordinato.

Semplificare la griglia nei breakpoint minori

Una composizione a quattro colonne con elementi estesi può funzionare su desktop e diventare troppo compressa su tablet. Passa alla vista tablet, riduci la griglia a due colonne e neutralizza gli span impostando i valori delle regole a 1. Su telefono passa a una sola colonna.

Controlla il risultato con l’Editor Responsive di Divi 5. Verifica non solo la forma delle card, ma anche ordine, lunghezza dei titoli, immagini mancanti e pulsanti. Grid rende possibile una struttura complessa; non la rende automaticamente robusta.

Alla fine dovresti saper leggere il layout in entrambe le direzioni: dal risultato alle regole e dalle regole al risultato. Se ti trovi a correggere ogni figlio singolarmente, chiediti se una regola sul contenitore possa fare lo stesso lavoro in modo più stabile. Nella parte 12 useremo Grid, Flexbox, preset e variabili per completare l’audit responsive dell’intero sito.

Prima di chiudere duplica qualche elemento e osserva come reagiscono regole, densità e ordine automatico. Poi rimuovine uno dal centro. Questa prova semplice simula ciò che accadrà con una raccolta dinamica e mostra subito se il pattern dipende troppo da una quantità precisa. Salva infine una copia del layout funzionante: sperimentare è più sereno quando puoi tornare indietro senza ricostruire la griglia.

Questo articolo è una rielaborazione originale in italiano basata sull’articolo originale di Elegant Themes, a cui va il credito per il tutorial di partenza.