Ente accreditato Regione Veneto n.4271

Broken grid layout: il trend degli ultimi tempi

Tutorial pratico attraverso l'uso dei Grid CSS

Pubblicato da Gianni Burei // 29 Ottobre 2019 // 196 visualizzazioni

Nell’ultimo decennio il trend grafico dei siti web è cambiato molto. Siamo passati da grafiche che cercavano di rappresentare il mondo reale (scheumorfismo) a design innaturali e minimalistici (Flat Design prima e Material Design poi).

Seguendo questa continua evoluzione, si sta facendo strada un nuovo modo di gestire i contenuti nelle pagine web, che spesso viene apostrofato dai web designer come “Web 3.0”.

L’idea di questo nuovo approccio è quello di abbandonare l’incastonamento a volte troppo rigido delle colonne, in favore di elementi che si sovrappongono e che si intersecano l’uno con l’altro. Qui sotto potete vedere un esempio di questo cambiamento:

Broken grid layout

Questo nuovo design è facilitato soprattutto da nuove proprietà CSS che hanno semplificato la costruzione del sito. Tra queste dobbiamo citare in primis il Flexbox, che ha rivoluzionato l’incolonnamento degli elementi (per approfondire l’argomento vi rimando a questo ottimo articolo).

Ma la vera svolta l’abbiamo con l’avvento del Grid CSS. Queste nuove proprietà infatti nascono appositamente per semplificare e migliorare la gestione del layout della pagina. Se Flexbox lavora principalmente su un’unica dimensione, Grid CSS ci aiuta a posizionare gli elementi tra loro sfruttando tutte e due le dimensioni della pagina. Il tutto con un occhio di riguardo al responsive.

Lo scopo di questo articolo non è quello di spiegarvi come funzionano i Grid CSS (potete comunque approfondire l’argomento andando a questo link), ma sfruttare queste proprietà per ricreare un trend grafico che circola ultimamente sui siti web: le Broken Grids.

Questa tecnica consiste nel sovrapporre le celle all’interno della stessa “griglia”. Questo crea un layout più movimentato e meno statico, evitando gli incasellamenti che invece spesso si hanno con l’uso dei classici grid system a colonne.

Vediamo quindi come poter creare un layout come quello che vedete qui sotto: una possibile sezione di una pagina in cui si intersecano del contenuto testuale, un’immagine e un’ulteriore box di testo.

 

1 – Suddividiamo in colonne e righe il layout

Come avete potuto vedere qui sopra, prima di creare in HTML/CSS la sezione, l’ho “disegnata” con Adobe XD (ma vanno benissimo anche altri programmi come Sketch, Figma, ecc.).

Da qui, sfruttando le guide, vado a tracciare i divisori di righe e colonne: ogni qual volta inizia o termina uno degli elementi al suo interno, piazzo una guida. Il risultato finale dovrebbe essere quindi questo qui sotto:

Questo mi aiuta a capire prima di tutto in quante righe/colonne è composta la griglia e soprattutto le dimensioni/rapporti che ci sono tra esse.

 

2 – Prepariamo la griglia in HTML

Ora possiamo passare al montaggio. Per prima cosa preparo la parte HTML, che semplicemente avrà un “.grid-container” che sarà il nostro contenitore per il Grid CSS, e al suo interno inserisco i 4 elementi di cui sarà composta:

  • il testo (.testo) che conterrà titolo e testo che vediamo in alto
  • l’immagine (.immagine) con l’immagine a destra
  • il box azzurro (.box-azzurro) con il secondo blocco di testo
  • il box grigio chiaro (.box-grigio) che sarà usato principalmente per scopi grafici

 

3 – Prepariamo la griglia in CSS

Ora possiamo passare al CSS e prima di tutto dobbiamo configurare la grigia CSS, suddividendo l’area nel giusto numero di colonne e righe, e con rapporti di dimensione consoni a quanto deciso nella bozza grafica.

Per far questo prima di tutto indico che l’elemento è una griglia (display:grid;) e poi utilizzo rispettivamente grid-template-columns per gestire le colonne, e grid-template-rows per gestire le righe.

Dal punto 1 abbiamo visto che servono 5 colonne e 3 righe. Infatti le 2 proprietà presentano rispettivamente 5 e 3 valori, separati da spazio.

Ogni valore indica la dimensione. Per le righe ho usato una dimensione assoluta, attraverso i pixel (px). Per le colonne ho preferito partizionare lo spazio in frazioni. L’unità “fr” infatti serve a indicare quante frazioni occupa la colonna. Se sommo le frazioni che ho scritto ho che il totale è 12 (2+2+3+1+4). Quindi ad esempio, la quarta colonna sarà 1/12 della larghezza totale (data dal contenitore, che in questo esercizio ho impostato a 1110px).

L’uso delle frazioni non è obbligatorio e si possono usare altre unità di misura. Il vantaggio in questo caso è che si semplifica il ridimensionamento in fase di responsive.

 

4 – Posizioniamo gli elementi della griglia

Ora torna molto utile la suddivisione fatta al punto 1. Avrete notato che oltre a suddividere le colonne, ho numerato ogni guida, partendo dall’angolo in alto a sinistra. I Grid CSS utilizzano proprio questa numerazione per indicare l’inizio e la fine di ogni elemento all’interno della griglia.

Fatta questa premessa passiamo al Broken Grid. Il posizionamento di ogni elemento è indipendente dagli altri quindi posso far partire un elemento prima della fine del precedente.

Ad esempio, l’immagine partirà, a livello di colonna, dal divisorio 4 fino al 6. Il box azzurro invece dal divisorio 3 fino al 5. Analizzando le righe abbiamo che l’immagine partirà dal divisorio 1 fino al 4, mentre il box azzurro dal divisorio 2 al 3.

Questo crea ovviamente una sovrapposizione, che è assolutamente permessa nel grid CSS. Infatti, come detto prima gli elementi si dispongono indipendentemente l’uno dall’altro, sfruttando la “scacchiera” messa a disposizione dal contenitore grid al punto 3. Qui sotto potete vedere la disposizione di ogni div:

Di norma gli elementi che vengono dopo nell’HTML si posizionano davanti a quelli precedenti, ma potete usare la proprietà “z-index” per cambiare questo ordine.

Il risultato finale lo potete vedere qui sotto. E alla fine dell’articolo troverete anche il link per scaricare il codice completo di questo esercizio.

Questo è tutto. È davvero più semplice di come possa apparire vero? L’aspetto più ostico è disegnare prima di tutto il layout da creare. E ve lo consiglio caldamente, perché ricreare un broken grids, senza prima aver ben chiaro la suddivisione in colonne e righe è davvero un compito difficile e a mio avviso poco vantaggioso.

Ricordate bene però: sovrapporre e mescolare tra loro box non vuol dire posizionare a caso gli elementi. È sempre importante che in un design si rispettino i giusti pesi e che il tutto sia ben disposto e ordinato, dando coerenza agli spazi. Insomma, dovete imparare a creare un caos ordinato.

P.S.: Nell’esempio fatto in questo articolo ho usato un’immagine presa su Unsplash che permette il download d’immagini gratuite senza obbligo di attribuzione. Ci tengo però a ringraziare l’autore, visto che è un nostro corsista di Web Design. Se volete vedere altre immagini pubblicate da lui vi lascio il link: https://unsplash.com/@michaelbaccin

Qui sotto potete scaricare l’esercizio completo:

Scarica l’esercizio

 

Topic: , , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Send this to a friend