Realizzare layout complessi e responsive con Gutenberg (l’editor nativo di WordPress) non è così intuitivo come con altri page builder. Esiste uno strumento che, se ben compreso, sarà un potente alleato nella realizzazione del layout della tua pagina: il Blocco Griglia.
Cos’è il Blocco Griglia di Gutenberg?
Il Blocco Griglia è una variante del blocco Gruppo, attivabile dalle impostazioni del blocco stesso o selezionandolo come se fosse un blocco a sé stante.
È uno dei blocchi layout più avanzati dell’editor a blocchi di WordPress (Gutenberg).
A differenza dei blocchi semplici, il blocco Griglia è un contenitore che può sfruttare la logica dI CSS Grid per organizzare gli elementi contenuti al suo interno (testi, immagini, pulsanti, ecc.) in righe e colonne, con una flessibilità e una capacità di risposta superiori rispetto al blocco Colonne standard. Ho parlato del blocco Colonne in quest’altro articolo.
In parole povere: definisci un numero di colonne e come gli elementi si posizionano e si comportano all’interno di quello spazio in modo strutturato.
Il blocco Griglia aiuta a creare strutture che vanno oltre il semplice layout a due o tre colonne fisse.
Un esempio pratico per capire: creiamo una griglia per una sequenza di immagini
Quando attivi il blocco Griglia si crea una gerarchia fra il Contenitore e gli elementi in esso contenuti. Puoi vedere bene questa alberatura attivando il Riepilogo del documento.
Suggerimento: parti sempre da un contenitore già riempito con gli elementi così sarà più facile per te posizionarli nel modo corretto.
Per il nostro esempio ho scelto immagini con aspetto sia verticale che orizzontale. Appena attivato il blocco Griglia il risultato è piuttosto disordinato.
Per il prossimo passo deve essere chiaro nella tua mente come dovranno essere disposti gli elementi e che spazi occupare. Ti puoi aiutare immaginando di dividere lo spazio a disposizione in righe e colonne, come una tabella.
Ogni elemento “occuperà” un determinato numero di righe e colonne, ad esempio 2 colonne e 3 righe, o 1 colonna e 1 riga. Lo so il ragionamento può essere complesso, ma tu seguimi.
Il numero delle colonne viene deciso nelle opzioni del Contenitore (il blocco griglia) in due modi: Auto o Manuale
Scegliendo l’opzione Auto gestisci il numero di colonne decidendo la larghezza minima di ogni colonna dall’apposito selettore. Più piccolo è il numero che scegli, maggiore sarà il numero di colonne.
Viceversa con l’opzione Manuale decidi solo il numero di colonne che vuoi impostare (Ad esempio 4).
So che questa sembra l’opzione più facile, ma attenzione perché non è responsive.
Il numero di colonne deciso per la versione desktop rimarrà invariato anche per la versione mobile, mentre con l’opzione Auto gli elementi su mobile si posizioneranno uno sotto l’altro se la larghezza minima sarà sufficiente a occupare la larghezza massima del device (sì, rileggilo).
Una volta deciso da quante colonne sarà composto il layout, seleziona ogni elemento e imposta l’estensione che occuperà in termini di righe e colonne. Attiva la tab Stili dell’elemento, nel nostro esempio il blocco Immagine, e scorri fino a trovare le opzioni Estensione Colonna e Estensione Riga.
Attenzione, l’ordine degli elementi influisce sul risultato finale.
Nel nostro esempio le sette immagini sono racchiuse in una griglia con posizione elemento: Auto – larghezza minima: 10rem. Ogni immagine si estende per un numero preciso di colonne e righe.
- Immagine 1:
- Estensione Colonna: 2
- Estensione Riga: 1
- Immagine 2:
- Estensione Colonna: 1
- Estensione Riga: 1
- Immagine 3:
- Estensione Colonna: 1
- Estensione Riga: 1
- Immagine 4:
- Estensione Colonna: 2
- Estensione Riga: 3
- Immagine 5:
- Estensione Colonna: 2
- Estensione Riga: 1
- Immagine 6:
- Estensione Colonna: 2
- Estensione Riga: 1
- Immagine 7:
- Estensione Colonna: 2
- Estensione Riga: 1
Ed ecco il vero layout ottenuto col Blocco Griglia:
I superpoteri del blocco Griglia + blocco Copertina
L’esempio di prima è stato puramente a scopo esplicativo del funzionamento del blocco Griglia, ma come puoi inserirlo in un contesto reale?
Ad esempio creando una griglia dove gli elementi contenuti sono blocchi Copertina. In questo modo puoi sfruttare la possibilità di sovrapporre del testo a un’immagine. Eviterai l’effetto “scalino” se le immagini non sono ben proporzionate e potrai gestire l’altezza del blocco copertina creando elementi con altezza variabile.
Nel blocco Copertina puoi inserire sia elementi statici, come pulsanti o paragrafi, sia blocchi dinamici con il titolo dell’ultimo articolo pubblicato in una determinata categoria.
Se questo esempio ti è piaciuto puoi copiare il codice e usarlo sul tuo sito
<!-- wp:group {"layout":{"type":"grid","minimumColumnWidth":"10rem"}} -->
<div class="wp-block-group"><!-- wp:cover {"url":"https://gloweb.it/wp-content/uploads/2026/03/composizione-natura-blu-verticale.jpg","id":3037,"dimRatio":50,"customOverlayColor":"#015b8b","isUserOverlayColor":false,"minHeight":200,"contentPosition":"bottom left","sizeSlug":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}},"layout":{"rowSpan":2,"columnSpan":2}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover has-custom-content-position is-position-bottom-left" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);min-height:200px"><img class="wp-block-cover__image-background wp-image-3037 size-full" alt="" src="https://gloweb.it/wp-content/uploads/2026/03/composizione-natura-blu-verticale.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#015b8b"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"color":{"background":"#ffffffcc"},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#ffffffcc;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"},"elements":{"link":{"color":{"text":"var:preset|color|palette-color-2"}}},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"textColor":"palette-color-2","fontSize":"small"} -->
<p class="has-palette-color-2-color has-text-color has-link-color has-small-font-size" style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20);font-style:normal;font-weight:700;text-transform:uppercase">come si fa</p>
<!-- /wp:paragraph -->
<!-- wp:latest-posts {"categories":[{"id":1,"name":"Come si fa"}],"postsToShow":1,"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}}} /--></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
<!-- wp:cover {"url":"https://gloweb.it/wp-content/uploads/2026/03/folgie.jpg","id":3041,"dimRatio":50,"customOverlayColor":"#2a6c51","isUserOverlayColor":false,"minHeight":100,"contentPosition":"bottom right","sizeSlug":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}},"layout":{"columnSpan":2}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover has-custom-content-position is-position-bottom-right" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);min-height:100px"><img class="wp-block-cover__image-background wp-image-3041 size-full" alt="" src="https://gloweb.it/wp-content/uploads/2026/03/folgie.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#2a6c51"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|palette-color-2"}}},"border":{"radius":{"topLeft":"50px","topRight":"50px","bottomLeft":"50px","bottomRight":"50px"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}},"color":{"background":"#ffffffb0"}},"textColor":"palette-color-2"} -->
<p class="has-text-align-center has-palette-color-2-color has-text-color has-background has-link-color" style="border-top-left-radius:50px;border-top-right-radius:50px;border-bottom-left-radius:50px;border-bottom-right-radius:50px;background-color:#ffffffb0;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">Foglie</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
<!-- wp:cover {"url":"https://gloweb.it/wp-content/uploads/2026/03/fiume.jpg","id":3040,"dimRatio":50,"customOverlayColor":"#3a5225","isUserOverlayColor":false,"minHeight":150,"contentPosition":"bottom right","sizeSlug":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}},"layout":{"columnSpan":2}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover has-custom-content-position is-position-bottom-right" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);min-height:150px"><img class="wp-block-cover__image-background wp-image-3040 size-full" alt="" src="https://gloweb.it/wp-content/uploads/2026/03/fiume.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim" style="background-color:#3a5225"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|palette-color-2"}}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}},"color":{"background":"#ffffffb0"}},"textColor":"palette-color-2"} -->
<p class="has-text-align-center has-palette-color-2-color has-text-color has-background has-link-color" style="background-color:#ffffffb0;padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">Fiume</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group -->Conclusioni finali
Il blocco Griglia è uno dei blocchi più potenti e versatili di Gutenberg. Imparare a usarlo ti può permettere interessanti sperimentazioni, sia che tu sia un professionista oppure no.
So che la curva di apprendimento può essere ripida, ma una volta sperimentato e ottenuto risultati interessanti non varrai più rinunciarci.
Se vuoi un sito che sia “facile da gestire”, performante e che attragga nuovi clienti, scrivimi.
Se sei un/una Web Designer in erba e la mia esperienza può fare al caso tuo, contattami per delle lezioni mirate.
