C’è chi dice che “Grid o Flexbox in Divi 5? Bah, alla fine basta scegliere le colonne e via…”.

Capisco l’obiezione: per anni, con Divi, abbiamo imparato a ottenere layout decenti anche “spingendo” un po’ sezioni, righe e colonne. Il problema è che appena vuoi fare qualcosa di appena più preciso (allineamenti coerenti, spazi che non saltano su mobile, elementi in evidenza dentro una lista…), inizi a perdere tempo nel Visual Builder a inseguire l’impaginazione invece di costruirla.

Grid e Flexbox, in Divi 5, non sono due nomi “da smanettoni”: sono due modi diversi di far disporre gli elementi nella pagina. Se scegli quello giusto prima, lavori più veloce, tocchi meno impostazioni, e soprattutto eviti quei layout che sembrano ok su desktop ma poi “si rompono” appena cambi breakpoint.

In concreto: Flexbox ti aiuta quando devi far scorrere gli elementi in una direzione (in riga oppure in colonna). Grid invece è più adatto quando vuoi controllare righe e colonne insieme, soprattutto con elenchi ripetitivi (blog, portfolio, prodotti).

Qui sotto trovi una guida pratica (senza fumo): cosa fanno, dove le trovi in Divi 5, e quando usare l’una o l’altra con esempi reali.

Cosa fa Flexbox in Divi 5

Flexbox (cioè un sistema di impaginazione CSS che Divi 5 ti mette a disposizione con controlli visuali) serve per gestire come si dispongono i blocchi in una sola direzione.

• O li fai scorrere in orizzontale (da sinistra a destra)
• Oppure in verticale (dall’alto verso il basso)

Quello che Flexbox non fa “di default” è controllare bene righe e colonne insieme nello stesso momento. Per quello, ci pensa Grid.

In Divi 5 questo approccio sostituisce le sezioni speciali e le sezioni a larghezza piena. In pratica: non ti servono più come “scorciatoie”, perché con Flexbox ottieni gli stessi risultati con meno vincoli.

La cosa bella è che puoi annidare layout senza trucchi: una riga dentro una colonna, poi un’altra riga dentro quella, e così via. Quindi costruisci strutture complesse ma con una logica pulita.

Il vantaggio principale è il controllo direttamente nel Visual Builder, nel menu Layout:

• spaziature tra elementi
• allineamenti
• ordine dei contenuti sui vari dispositivi (desktop/tablet/mobile)

Per i posizionamenti “base” non serve scrivere CSS: lavori più veloce e il layout è più facile da mantenere (anche tra 3 mesi, quando ci rimetti mano).

Come usare Flexbox in Divi 5

Operativamente, il flusso è questo:

1. Aggiungi una riga nella sezione.
2. Scegli tra opzioni come colonne uguali, layout multi-riga o layout multi-colonna.
3. Inserisci i moduli nelle colonne come fai di solito.

Quando hai messo i moduli:

1. Apri le impostazioni della riga.
2. Vai su Design.
3. Apri il gruppo Layout: lì trovi i controlli Flexbox.

Hai già una sezione/una riga fatta “alla vecchia maniera”? Nessun problema: puoi convertire un layout esistente in Flexbox cambiando lo Stile di layout (sempre lì).

Da qui regoli anche la Direzione del layout, cioè se il contenuto scorre in orizzontale o in verticale.

Due impostazioni chiave:

• Giustifica contenuto: distribuisce gli elementi lungo la direzione principale (es. “tutti a sinistra”, “centrati”, “spazio tra” ecc.). In pratica: decide come si distribuiscono i moduli nella riga/colonna.
• Allinea elementi: decide come gli elementi “si appoggiano” sull’altra direzione (es. allineati in alto, al centro, in basso). In pratica: cura l’allineamento trasversale.

Hai anche controlli di spaziatura per margini orizzontali e verticali tra le colonne.

Se vieni da Divi “classico”, il flusso è familiare. Solo che adesso hai molte più leve per rifinire l’impaginazione senza uscire dal builder.

Cosa fa Grid in Divi 5

Grid (griglia) è un modello di layout CSS che controlla righe e colonne contemporaneamente.

Tradotto in pratica: invece di dire “metti questi elementi in fila”, dici “questa è la griglia (colonne/righe/celle), e tu contenuto posizionati lì dentro secondo queste regole”.

In Divi 5 lavori molto “a livello di contenitore”:

• decidi quante colonne e quante righe ti servono
• definisci dimensioni e spaziatura
• poi i moduli seguono quella struttura in modo ordinato

Divi 5 include anche modelli preimpostati (template) di griglie comuni: scegli quello vicino al risultato che vuoi e poi lo aggiusti, invece di configurare tutto da zero.

Con Grid puoi anche:

• decidere dove si posizionano gli elementi
• far occupare a un blocco più colonne o più righe
• creare pattern ripetibili (alcuni elementi “speciali” dentro una lista)

Imposti le regole una volta e Grid gestisce il posizionamento in automatico.

Usare le griglie in Divi 5

Quando aggiungi una riga nella sezione, vedrai i modelli di griglia insieme alle opzioni Flexbox. Scegli un modello di griglia adatto al layout che vuoi ottenere.

Anche qui puoi convertire layout esistenti in Grid dallo Stile di layout nella scheda Design delle impostazioni della sezione.

Dentro le impostazioni Grid trovi parametri che, detti semplici, rispondono a queste domande:

• Com’è fatta la griglia? (colonne/righe e dimensioni)
• Quanto spazio c’è tra le celle?
• Come si riempie automaticamente? (ordine e “compattazione”)

Le Larghezze colonne controllano come si comportano le colonne. Le Altezze righe fanno la stessa cosa per lo spazio verticale.

Colonne automatiche della griglia e Righe automatiche della griglia risolvono un problema pratico: cosa succede se gli elementi finiscono “oltre” la struttura definita. Queste impostazioni dicono alla griglia quanto devono essere larghe o alte le celle “in eccesso”. Senza, le dimensioni possono diventare imprevedibili.

Comprimi colonne vuote rimuove le colonne senza contenuti. Le colonne rimanenti si espandono per riempire lo spazio in automatico.

Larghezze colonne e Altezze righe ti danno controllo sulla dimensione delle celle. Puoi impostare:

• colonne a larghezza uguale (più uniformità)
• colonne automatiche in base al contenuto
• colonne manuali (se vuoi un controllo preciso)

Per le righe è simile: automatiche, uguali, minime o fisse.

I controlli Spazio aggiungono distanza tra le celle in orizzontale e in verticale. La Direzione della griglia ti permette di decidere come scorre il riempimento del contenuto.

La Direzione della griglia controlla come gli elementi riempiono le celle automaticamente: per righe (da sinistra a destra) o per colonne (dall’alto verso il basso). La Densità della griglia può “compattare” gli elementi per riempire i vuoti oppure mantenerli nell’ordine naturale.

Altro blocco importante: allineamenti e distribuzione.

• Giustifica contenuto: distribuisce la griglia orizzontalmente nel contenitore.
• Allinea contenuto: distribuisce la griglia verticalmente nel contenitore.
• Giustifica elementi e Allinea elementi: lavorano dentro la singola cella (posizione del contenuto nella cella, in orizzontale e verticale).

Per controllare posizione e “ingombro” di un singolo elemento: apri le impostazioni dell’elemento dentro la griglia e vai su Dimensionamento. Qui gestisci larghezza, altezza e posizione dell’elemento nella Griglia.

Quindi, in cosa sono diversi?

È vero: stanno nello stesso menu a tendina Stile di layout e servono entrambi a disporre i moduli nella pagina. Quindi a prima vista sembrano intercambiabili.

In realtà sono pensati per esigenze diverse. E scegliere quello giusto ti evita due classici problemi:

• perdere tempo a “domare” un layout che non nasce per quello
• ritrovarti con un design che su mobile richiede mille correzioni

Flexbox è più adatto ad alcuni tipi di impaginazione, Grid ad altri. Se sai in anticipo quale usare, eviti di forzare impostazioni contro il tuo obiettivo.

Ecco quando usare Flexbox e quando usare Grid, e come scegliere se in teoria potrebbero funzionare entrambi.

Quando ti serve Flexbox in Divi 5

Flexbox in Divi 5 funziona meglio quando il layout “scorre” in una sola direzione. Tipici casi:

• righe di contenuto (testo + immagine + pulsante)
• gruppi di pulsanti
• barre di navigazione

Gestisce bene anche il “andare a capo” automatico in base alla larghezza dello schermo. In Divi lo trovi come Avvolgimento layout: se imposti su A capo, gli elementi non sforano, ma vanno a riga successiva in modo ordinato. Risultato: mobile più semplice.

Divi 5 ti permette anche di riordinare le colonne sui diversi dispositivi tramite i controlli responsive. E qui Flexbox brilla davvero: per esempio, puoi mettere la tua chiamata all’azione per prima su mobile e per ultima su desktop senza duplicare la sezione e senza CSS personalizzato.

Flexbox è comodo anche quando costruisci “a mano” mentre procedi: aggiungi un modulo, guardi il risultato, aggiungi il successivo. Il layout si adatta in modo naturale mentre cresce.

E se ti serve avere pulsanti allineati in basso nelle colonne anche quando i testi hanno lunghezze diverse, puoi usare i Gruppi di moduli (cioè un contenitore che raggruppa più moduli e ti permette di gestirli come blocco unico) con Giustifica contenuto impostato su spazio tra. Tradotto: testo in alto, pulsante “spinto” in basso.

In sintesi: se il tuo layout scorre in una sola direzione e ti serve flessibilità su spazi, allineamenti e ordine responsive, Flexbox è spesso la scelta più pratica.

Quando ti serve Grid in Divi 5

Grid in Divi 5 è perfetta quando vuoi controllare righe e colonne insieme. Imposti la struttura una volta e poi gli elementi si distribuiscono seguendo quella logica.

È molto utile con il Costruttore di cicli (cioè lo strumento che ti fa mostrare liste di contenuti dinamici — articoli, prodotti, progetti — usando un unico modello ripetibile).

Esempio pratico: crei un modello per il blog, imposti lo stile di layout su griglia e gli articoli entrano nella struttura definita. Puoi cambiare numero di colonne, creare pattern e regolare gli spazi: il contenuto si distribuisce seguendo le regole, senza che tu debba “spostare a mano” ogni card.

L’editor degli offset (cioè gli “spostamenti” programmati degli elementi nella griglia) ti permette di creare pattern ripetuti dove alcuni elementi si comportano in modo diverso.

Esempio: ogni quarto elemento può occupare due colonne, partendo dal secondo. Imposti il pattern una volta e si ripete su tutta la pagina.

Grid è ottimo anche quando alcuni elementi devono occupare più celle: ad esempio un articolo in evidenza che prende due colonne, mentre gli altri ne prendono una. Lo controlli con Dimensionamento nelle impostazioni del singolo elemento (larghezza, altezza e posizione nella griglia).

Come scegliere quello giusto

La scelta tra Grid e Flexbox dipende da due cose:

• Come deve scorrere il contenuto (una direzione o due?)
• Quanto controllo ti serve sulla struttura (layout “fluido” o griglia definita?)

Ecco un criterio semplice per decidere.

Nota utile: puoi passare da Flexbox a Griglia (e viceversa) in qualsiasi momento dalle impostazioni del contenitore. Provi una soluzione, guardi come reagisce il contenuto e poi regoli. In Divi 5 puoi cambiare sistema di layout senza perdere i moduli e senza ricominciare da zero.

Esempi pratici (step by step) per scegliere tra Grid e Flexbox

Esempio 1: freelance che vuole una sezione “servizi + pulsante” sempre allineata

Obiettivo: tre box servizi con testi di lunghezza diversa, ma pulsanti tutti alla stessa altezza.

Scelta consigliata: Flexbox (perché lavori in una sola direzione e vuoi controllo sull’allineamento verticale dei contenuti).

Passi:

1. Crea una riga con 3 colonne e inserisci titolo, testo e pulsante in ogni colonna.
2. Seleziona la riga > Design > Layout > imposta Stile di layout su Flexbox.
3. Metti i contenuti di ciascuna colonna in un Gruppo di moduli, poi imposta Giustifica contenuto su spazio tra per spingere il pulsante verso il basso.

Caso reale tipico: un freelance web che vende “Sito vetrina / Ecommerce / Manutenzione”. Tre descrizioni diverse, ma vuoi i tre pulsanti “Richiedi preventivo” perfettamente allineati: Flexbox ti evita di compensare con padding diversi a caso.

Esempio 2: piccolo e-commerce che vuole una griglia prodotti con un elemento in evidenza

Obiettivo: una griglia di prodotti dove il primo prodotto (o quello in promo) occupa più spazio.

Scelta consigliata: Griglia (perché ti serve controllo su righe e colonne e un elemento che “si allarga” su più celle).

Passi:

1. Crea la riga e scegli un modello Griglia vicino al layout che vuoi.
2. Imposta Larghezze colonne e Spazio per ottenere il ritmo visivo giusto.
3. Apri le impostazioni dell’elemento “in evidenza” > Dimensionamento e impostalo per occupare più colonne/righe rispetto agli altri.

Caso reale tipico: un negozio online piccolo che ogni settimana spinge un prodotto “Best seller” o “-20%”: con Grid fai una card grande sempre coerente, senza dover rifare l’impaginazione ogni volta.

Esempio 3: agenzia/PMI con tanti articoli o progetti da gestire in modo coerente

Obiettivo: creare un archivio (blog/portfolio) sempre ordinato, che si aggiorna da solo quando pubblichi nuovi contenuti.

Scelta consigliata: Griglia + Costruttore di cicli (contenuti dinamici che si ripetono automaticamente).

Passi:

1. Crea un modello per l’archivio (categoria, blog o portfolio) e attiva il Costruttore di cicli.
2. Nella riga che contiene gli elementi del ciclo, imposta lo Stile di layout su Griglia.
3. Regola Direzione della griglia, Densità e Spazio per ottenere una resa stabile su desktop e mobile.

Caso reale tipico: un’agenzia che pubblica casi studio o una PMI con un blog “guide e news”. Vuoi che ogni nuovo contenuto entri nella stessa gabbia grafica, senza sorprese e senza interventi manuali: Grid + cicli è la combinazione più “a prova di aggiornamento”.

Conclusione

Flexbox ti dà controllo rapido su allineamenti, spazi e ordine dei contenuti quando il layout scorre in una sola direzione. Grid invece è ideale quando vuoi gestire righe e colonne insieme, soprattutto per elenchi ripetitivi e contenuti dinamici.

Il consiglio pratico è semplice: parti dalla soluzione più naturale per il layout che hai in testa. Se ti accorgi che stai “forzando” troppe impostazioni per farlo funzionare, probabilmente stai usando lo strumento sbagliato. E in Divi 5 la cosa comoda è che puoi cambiare approccio senza buttare via il lavoro.

Se ti blocchi su configurazioni avanzate (pattern, offset, griglie complesse, coerenza responsive) o vuoi impostare una strategia di layout più solida, ha senso farsi affiancare da uno sviluppatore Divi di fiducia per impostare una base pulita e riutilizzabile.

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