“Ma davvero nel 2026 stiamo ancora a parlare di griglie? Ormai c’è il builder, trascini due cose e via.”

Capisco l’obiezione. Sulla carta sembra tutto semplice: metti una riga, aggiungi colonne, sistemi due spazi e hai finito. Il problema è che appena il layout non è “il classico tre colonnine uguali”, iniziano i compromessi: colonne annidate dentro colonne, spaziature che cambiano da sole, elementi che su mobile si impilano in modo strano, e quella sensazione di non avere mai davvero il controllo.

Ecco perché il sistema CSS Grid di Divi 5 non è un vezzo da “sviluppatori”, ma una cosa molto pratica. Ti serve quando vuoi layout puliti, coerenti e replicabili, senza impazzire con incastri e soluzioni creative a metà. È utilissimo se sei un freelance e devi impaginare portfolio e landing page con ordine; se gestisci un piccolo ecommerce e vuoi griglie prodotto consistenti anche su telefono; e se lavori in PMI o agenzia e ti serve uno standard grafico che regga su tante pagine, senza dover “aggiustare a mano” ogni volta.

La parte bella? Resti dentro al Visual Builder: imposti una griglia vera (righe + colonne), definisci spaziature e allineamenti con controlli visivi, e ottieni un layout responsive (cioè che si adatta bene a desktop, tablet e mobile) senza scrivere codice. Risultato: meno compromessi e più precisione, anche se non sei uno sviluppatore.

Che cos’è CSS Grid?

CSS Grid è un sistema di impaginazione “nativo” del web, progettato per costruire layout su due dimensioni: righe e colonne.

La differenza principale rispetto ad altri approcci è questa:

• con Flexbox (un sistema per disporre elementi in modo flessibile lungo un asse alla volta, orizzontale o verticale) ragioni spesso “in fila”;
• con Grid ragioni “a griglia completa”, come una scacchiera.

Un’immagine che funziona quasi sempre: pensa a un foglio di calcolo. Hai celle ordinate e puoi decidere dove mettere ogni blocco con molta più precisione, senza dover creare mille contenitori uno dentro l’altro.

Che cos’è il sistema CSS Grid di Divi 5?

Il sistema CSS Grid di Divi 5 porta questa logica direttamente nel Visual Builder (l’editor visuale in cui costruisci la pagina trascinando e configurando moduli). In pratica:

• definisci una griglia (righe/colonne);
• inserisci moduli e contenuti;
• Divi genera “dietro le quinte” le regole CSS necessarie.

Il punto non è solo fare layout “belli”. È fare layout prevedibili e responsive, con regole chiare.

I componenti principali del CSS Grid di Divi 5

Ci sono tre componenti principali nel sistema CSS Grid di Divi 5:

Contenitori di griglia

In Divi 5, sezioni, righe, colonne e gruppi possono diventare contenitori di griglia. Tradotto: sono il “telaio” del layout. Qui decidi quante righe/colonne esistono e come devono comportarsi.

Elementi della griglia

I moduli “figli” (testo, immagini, pulsanti o qualsiasi modulo Divi) diventano gli elementi della griglia. Sono i blocchi che si “appoggiano” alle celle e seguono le regole che hai definito.

Proprietà personalizzabili

Da Visual Builder puoi gestire:

• numero e larghezza delle colonne;
• numero e altezza delle righe;
• spazi tra gli elementi (gap);
• allineamenti (come si posizionano e “si stirano” gli elementi);
• impostazioni responsive per dispositivo.

Questi controlli sono menu e cursori: imposti struttura e comportamento senza passare dal codice (a meno che tu non voglia).

Un’interfaccia visiva semplice

Divi 5 “traduce” CSS Grid in un’interfaccia visuale: tu scegli opzioni e vedi anteprime, e Divi scrive le regole CSS al posto tuo. Risultato: anche chi non sviluppa riesce a ottenere layout ordinati e professionali. E se sei più smanettone, puoi comunque rifinire con interventi avanzati.

Funzionalità chiave

Divi 5 include strutture di griglia preimpostate (righe/colonne già configurate), utili per partire al volo con una base “sensata”.

Hai poi due approcci complementari:

• Posizionamento automatico: Divi distribuisce gli elementi nella griglia in base alle regole impostate (ottimo quando vuoi velocità e coerenza).
• Posizionamento esplicito: decidi tu dove va ogni modulo e quanto spazio occupa (perfetto per layout più editoriali o con “elementi in evidenza”).

In più, puoi definire impostazioni per dispositivo, così la griglia si adatta a mobile, tablet e desktop con pochi interventi.

Come usare la CSS Grid di Divi 5

Per iniziare, aggiungi una nuova sezione a una pagina in Divi 5. Quando compare la finestra di inserimento della sezione, vedrai che le strutture sono aggiornate: ora puoi scegliere tra contenitori Flex e contenitori Grid.

Come scegliere?

• Scegli Grid quando ti serve controllo su due assi: righe + colonne.
• Usa Flex quando ti basta disporre elementi su un solo asse (per esempio una riga di loghi o una colonna di elementi impilati).

Dopo aver scelto una struttura Grid, aggiungi i moduli (gli elementi “figli”) dentro la griglia.

Esempi pratici (senza codice) per usare la CSS Grid di Divi 5

Esempio 1 – Freelance: portfolio ordinato e responsive

• Crea una sezione e scegli un contenitore Grid.
• Imposta 3 o 4 colonne su desktop e aumenta il Gap (la distanza tra gli elementi) per dare respiro alle card.
• Inserisci moduli immagine + titolo + pulsante.
• Nei breakpoint responsive (cioè le viste per tablet/telefono), riduci la griglia a 2 colonne su tablet e 1 colonna su telefono.

Effetto pratico: il portfolio resta leggibile, senza miniature microscopiche o impaginazioni “a fisarmonica”.

Esempio 2 – Piccolo ecommerce: griglia prodotti coerente

• Crea una griglia con Colonne di uguale larghezza per allineare bene prezzo e pulsanti.
• Imposta Righe ad altezza automatica se titoli e descrizioni cambiano spesso (la griglia si adatta al contenuto).
• Usa allineamenti tipo Stretch (in italiano: “Allunga”) per far “riempire” lo spazio alle card e mantenere un look pulito.

Effetto pratico: anche se un prodotto ha un titolo più lungo, non ti si rompe la riga.

Esempio 3 – Agenzia/PMI: layout con elemento in evidenza

• Imposta una griglia a 4 colonne.
• Applica una regola di Offset (cioè una regola che sposta o estende un elemento rispetto alla griglia) per far occupare al primo elemento 2 colonne.
• Nei breakpoint mobile, riduci l’estensione a 1 colonna per evitare blocchi troppo larghi.

Scenario tipico: vuoi mettere in evidenza un servizio “core”, una promo o un caso studio, senza creare sezioni separate e senza incasinare l’allineamento degli altri box.

Impostazioni della griglia

Una volta impostata la struttura, le impostazioni CSS Grid ti permettono di controllare il comportamento del layout. Qui trovi le principali opzioni, spiegate in modo pratico.

Stile di layout

Ti fa scegliere il tipo di layout della sezione. Se selezioni una struttura Grid, la griglia viene impostata automaticamente. Le alternative includono Flex e Blocco.

Spazio orizzontale

Con Spazio orizzontale regoli la distanza tra le colonne.

Spazio verticale

Stessa logica, ma per la distanza tra le righe.

Larghezze delle colonne

Queste impostazioni controllano come si comportano le colonne:

Colonne di uguale larghezza rende tutte le colonne identiche. Puoi anche scegliere quante colonne avere e comprimere le colonne vuote.

Colonne con uguale larghezza minima garantisce la stessa larghezza minima per tutte le colonne, che poi possono espandersi per occupare lo spazio disponibile.

Colonne con uguale larghezza fissa blocca tutte le colonne a una larghezza specifica impostata da te, indipendentemente dal contenuto.

Con Colonne a larghezza automatica, ogni colonna si adatta al proprio contenuto. Se una colonna ha un’immagine larga e un’altra ha testo corto, le larghezze si regolano di conseguenza.

Infine, Colonne a larghezza manuale ti permette di impostare una larghezza diversa per ogni colonna, utile per layout asimmetrici.

Colonne automatiche della griglia

Funziona con qualsiasi scelta nelle Larghezze delle colonne. Definisce come vengono dimensionate eventuali colonne extra create automaticamente quando il contenuto “sfora”. In automatico, seguono la larghezza naturale del contenuto; in alternativa puoi impostare un valore fisso con le unità CSS supportate in Divi 5.

Altezze delle righe

Le impostazioni Altezze delle righe controllano l’altezza delle righe della griglia.

Con Righe ad altezza automatica, le righe si adattano al contenuto: utile se testi e immagini variano (ad esempio un blog o una galleria).

Con Righe di uguale altezza, tutte le righe hanno la stessa altezza. Righe ad altezza minima imposta un minimo, ma le righe possono crescere se serve. Righe ad altezza fissa blocca l’altezza a un valore preciso. Righe ad altezza manuale ti permette di impostare altezze diverse riga per riga.

Numero di righe

Con Numero di righe definisci quante righe avrà la tua griglia. È un controllo diretto sulla struttura verticale del contenitore Grid.

Righe automatiche della griglia

Righe automatiche della griglia definisce l’altezza delle righe extra create automaticamente quando aggiungi più contenuti rispetto alle righe previste. Puoi lasciarle adattare al contenuto più alto, oppure definire un’altezza fissa con le unità CSS disponibili in Divi 5.

Impostazioni di allineamento della griglia

Le opzioni sotto Direzione della griglia, Densità della griglia, Giustifica contenuto, Allinea elementi, Allinea contenuto e Giustifica elementi ti aiutano a decidere come gli elementi vengono disposti e spaziati dentro il contenitore.

• Direzione della griglia: imposta l’ordine con cui gli elementi riempiono la griglia, per Riga o per Colonna.
• Densità della griglia: controlla come il posizionamento automatico riempie gli spazi vuoti. Denso fa sì che elementi successivi possano “riempire i buchi” se ci stanno; Sparso mantiene l’ordine naturale.
• Giustifica contenuto: decide come righe/colonne (le “tracce”) si posizionano sull’asse orizzontale dentro al contenitore. Inizio allinea a sinistra, Centro centra, Fine allinea a destra. Le opzioni con “spazio” distribuiscono diversamente le tracce.
• Allinea elementi: allinea verticalmente i singoli elementi nella cella. Inizio in alto, Centro al centro, Fine in basso. Allunga fa occupare l’intera altezza disponibile.
• Allinea contenuto: controlla come le tracce della griglia si posizionano sull’asse verticale dentro al contenitore.
• Giustifica elementi: allinea gli elementi dentro le celle in orizzontale. Allunga occupa tutta la larghezza, Centro o Fine li sposta al centro o a destra, Inizio li allinea a sinistra.

Regole di offset della griglia

Queste regole servono per personalizzare posizione e dimensione di elementi specifici: in pratica decidi quanti “blocchi” devono occupare su righe e colonne.

Nell’immagine sotto è stata creata una regola chiamata Il primo elemento occupa 2 colonne: significa che il primo elemento si estende su due colonne. Ecco cosa indicano le voci principali:

• Etichetta amministratore: un nome per riconoscere la regola al volo.
• Offset di destinazione: definisce quali elementi colpire con pattern tipo 5n+1 (ogni 5 elementi, partendo dal primo).
• Regola di offset: controlla posizionamento e dimensione dell’elemento. In questo esempio è impostata su Estensione colonne, cioè quante colonne deve coprire.
• Valore di offset: indica quanto deve “occupare” o spostarsi. Qui il valore 2 dice a Divi che quell’elemento deve occupare 2 colonne.

Puoi aggiungere tutte le regole di offset che ti servono cliccando su + Aggiungi regola di offset della griglia.

Opzioni responsive

Divi 5 offre punti di interruzione (breakpoint) responsive personalizzabili per adattare le griglie agli schermi più piccoli. E qui succede la cosa utile: puoi cambiare le regole per dispositivo.

Esempio pratico: sei sul breakpoint tablet e modifichi l’Estensione colonne (cioè quante colonne occupa un elemento). Se su tablet hai 4 colonne, potresti voler far occupare a un elemento 3 colonne su 4.

La stessa scelta però potrebbe non funzionare su telefono. Con le impostazioni responsive imposti un’Estensione colonne diversa per ogni breakpoint, e il layout resta ordinato ovunque.

Esempi di CSS Grid

Ecco 3 esempi pratici di griglie realizzate con Divi 5, utili come ispirazione. Ogni esempio rappresenta un tipo di struttura: masonry (a “mosaico”), multi-riga e sidebar.

Masonry

In questo esempio c’è un layout a 4 colonne per un’attività food. Vengono usate Colonne di uguale larghezza con spazio orizzontale e verticale (gap) a 35px. Il numero di colonne è 4 con Righe ad altezza automatica. Inoltre Allinea elementi e Giustifica elementi sono impostati su Allunga, così la griglia risulta più simmetrica e pulita.

Multi-riga

Questo layout ha un gap orizzontale e verticale di 10px, con Larghezze delle colonne impostate su Colonne a larghezza manuale. È stata definita una Struttura colonne della griglia pari a 1.25fr 1fr 1.5fr.

Qui compare un termine tecnico utile: fr (unità frazionaria). In pratica significa: “dividi lo spazio disponibile in proporzioni”. Quindi:

• Prima traccia: 1.25fr occupa 1.25 / 3.75 (circa 33,33%) dello spazio disponibile.
• Seconda traccia: 1fr occupa 1 / 3.75 (circa 26,67%) dello spazio disponibile.
• Terza traccia: 1.5fr occupa 1.5 / 3.75 (circa 40%) dello spazio disponibile.

Ogni riga è stata impostata con altezza fissa.

Sidebar

Qui viene usato un layout a 4 colonne con barra laterale. Sono stati usati gli strumenti responsive per adattare le colonne sui dispositivi più piccoli, con Larghezze delle colonne impostate su Colonne di uguale larghezza e il resto lasciato di default.

Nell’ultima colonna è stata aggiunta una riga annidata, e sono state usate le impostazioni di Ordine di visualizzazione (in pratica: la priorità con cui gli elementi si dispongono quando lo schermo si restringe) per controllare come le colonne si comportano su mobile.

Conclusioni: quando conviene usare CSS Grid in Divi 5

Il sistema CSS Grid di Divi 5 ti permette di creare layout più precisi e davvero responsive: controlli righe, colonne, spazi e allineamenti con impostazioni visuali, e puoi gestire anche “eccezioni” (tipo un box in evidenza) usando le regole di offset.

Se vuoi un consiglio pratico, senza perderti in teoria:

• parti da una griglia semplice (es. 3 o 4 colonne);
• definisci gap e allineamenti (così il layout “respira”);
• solo dopo aggiungi offset e varianti per tablet/telefono.

Se devi impostare un layout davvero articolato o vuoi una struttura coerente con obiettivi specifici (lead, vendite, catalogo, servizi), ha senso farsi affiancare da uno sviluppatore Divi di fiducia: ti fa risparmiare tempo e, soprattutto, ti evita di fissare “a occhio” cose che la griglia può gestire con regole chiare.

Questo articolo è stato tradotto e riscritto partendo da questo articolo su Elegant Themes