L’importanza del grid system

Oggi voglio parlarvi dell’importanza che ha nel web design l’utilizzo di un solido grid-system. Ma prima di tutto cos’è un grid-system?

Il grid-system è un insieme di regole CSS create per supportarci nella disposizione dei nostri contenuti all’interno della pagina. Queste classi ci permettono di partizionare il nostro contenitore in più colonne con dimensioni e spazi coerenti tra loro. Da non confondere con il Grid CSS che invece è un insieme di proprietà CSS messe a disposizione dal W3C per creare box multidimensionali di elementi.

Perché è importante

Strutturare la pagina in griglie e suddividere lo spazio in colonne è un principio grafico che permette di calibrare i pesi della pagina e avere un aspetto globale coerente. Questo non vuol dire che dovete fare siti web stile Excel, sentitevi liberi di posizionare gli elementi come volete, o anche intersecarli tra loro (trend degli ultimi anni, grazie anche ai Grid CSS), me è importante che visivamente i pesi siano sempre bilanciati, per evitare che passi l’idea che gli elementi “siano stati buttati li a caso”.

Perché è proprio questa la sfida per un layout web: essere originali senza dare l’idea di aver messo 2-3 immagini casualmente. Quindi via alla libera interpretazione degli spazi sulla pagina, ma sempre con un occhio coerente sugli spazi tra gli elementi e sulle dimensioni delle varie colonne.

Grid System e responsive design

Un altro aspetto per cui consiglio l’utilizzo di un grid-system è legato al responsive design. Questo approccio vi semplifica di gran lunga la gestione responsive delle colonne e quindi degli elementi della pagina. Occhio, non è che il sito magicamente diventerà responsive, ma di sicuro dimezzerete il lavoro per assicurarvi che il vostro sito sia accessibile ai dispositivi mobile.

Grid System non vuol dire per forza Bootstrap

Spesso la parola Grid System è associata a Bootstrap e viceversa. E quindi chi odia Bootstrap è perché pensa che usare questo framework CSS ti obblighi a dover per forza usare tutti i suoi componenti, e finisce per odiare di riflesso anche il grid system.

Facciamo quindi chiarezza: il grid system non è un’esclusiva di Bootstrap. Chiunque può crearsi il suo sistema a griglie da riutilizzare nei propri progetti. Esistono soluzioni alternative a Bootstrap e persino soluzioni sviluppate da singoli utenti.

Nel primo caso abbiamo esempi come Materialize CSS o il più famoso Foundation CSS. Nel secondo invece possiamo citare esempi come Alux di Marchetti, o rimanendo in casa nostra Raven del mio collega e docente Simone Baldassin (progetto in cui ho avuto il piacere di collaborare).

Bootstrap non è il male

Titolo abbastanza emblematico. Ma ci tengo a sfatare un altro grosso mito. Eh sì, perchè agli occhi di molti Bootstrap rappresenta un modo semplice per fare siti tutti uguali. Vero?

Ed è qui che vi sbagliate, perché questo framework è modulare e presenta diverse macro sezioni: Abbiamo la parte che riguarda il grid-system, i contenuti, le componenti, le utility e i plugin JavaScript.

Ecco, se pensate di usare Bootstrap in tutti i suoi aspetti, facendo uso di tutti gli elementi sopra descritti, allora vi do ragione: avrete siti molto simili l’uno dall’altro. D’altro canto, questo framework nasce proprio per sviluppare velocemente template web per il back-end, dove l’originalità va in secondo piano, rispetto all’usabilità.

Ma non siete obbligati ad usare tutto: ad esempio, io nei miei progetti mi limito a caricare solo quello che serve a far funzionare il grid-system. Quindi via componenti, javascript e altri amenicoli vari. Lo stesso Bootstrap 4 mette a disposizione un file CSS che raccoglie solamente le regole di grid-system.

Ed ecco che così facendo abbiamo un grid-system pronto all’uso, completo, robusto, responsive e abbastanza semplice da usare. Senza pregiudicare quindi l’originalità del vostro sito.

Ma come faccio ad usare Boostrap come grid-system?

Quando scaricate Boostrap, avrete una serie di file CSS e JS a disposizione. Per usare solo il grid-system dovete includere nel vostro progetto solamente il file “bootstrap-grid.min.css”. Da questo momento avrete a disposizione tutte le funzionalità legate al grid-system oltre alle utilities per gestire la parte di flexbox (che utilizza il grid-system).

Se avete bisogno di aiuto nell’uso potete sempre fare riferimento alla sezione Layout della documentazione di Bootstrap, che vi spiega perfettamente l’utilizzo del grid-system. Ovviamente le altre sezioni non saranno disponibili, quindi non potrete usare componenti come form, tabelle e pulsanti già formattati (meglio, così creerete layout originali).

Breve intro al grid-system di Bootstrap

Una volta incluso il grid-system di Boostrap, abbiamo a disposizione una serie di class CSS utili. Vediamone alcuni insieme in questa una brevissima introduzione.

Prima di tutto abbiamo .container che è la classe principale per poter creare un contenitore a larghezza fissa. Bootstrap crea un contenitore la cui larghezza interna è 1110px (1140px a dire il vero, a cui però dovete poi togliere 15px di padding per lato).

<div class="container">
  <!-- Contenuto qui -->
</div>

Se vogliamo invece suddividere lo spazio in colonne dobbiamo prima di tutto creare un contenitore con la classe .row. questa serve a prepare le colonne al suo interno. Di base Bootstrap suddivide lo spazio in 12 colonne, spaziandole tra loro di 30px (ma è possibile eliminare lo spazio dando al contenitore .row anche la classe .no-gutter).

Per creare colonne all’interno del nostro contenitore .row, dobbiamo usare la classe .col. che partiziona lo spazio in maniera uguale a seconda del numero di .col all’interno della .row. Nell’esempio qui sotto ad esempio, abbiamo 3 .col, quindi ognuna occuperà 1/3 dello spazio dato dal .container:

<div class="container">
  <div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
  </div>
</div>

Se invece vogliamo definire noi gli spazi delle varie colonne, usiamo le class .col-n (dove al posto di n metterò il numero di colonne che deve occupare, fino ad un massimo di 12). Ad esempio, qui sotto ho creato 2 colonne, una che occupa 4 spazi e una che ne occupa 8. In pratica la prima colonna sarà larga 1/3 del contenitore, mentre la seconda 2/3:

<div class="container">
  <div class="row">
    <div class="col-4">...</div>
    <div class="col-8">...</div>
  </div>
</div>

Esistono poi alcune utilities che mi permettono di centrare le colonne tra loro. Ad esempio aggiungendo la classe .justify-content-center al nostro-row, avrò che le colonne si centreranno (utile quando la somma degli spazi occupati dalle colonne è minore di 12). Se invece metto anche .align-items-center, avrò le colonne centrate verticalmente tra loro.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <div class="col-4">...</div>
    <div class="col-4">...</div>
  </div>
</div>

Bootstrap e responsive design

Un’altra cosa che adoro del grid-system di bootstrap è la completa gestione delle colonne in tutti i breakpoint del nostro layout responsive: da desktop a mobile.

Bootstrap definisce 5 diversi breakpoint e di conseguenza rivede anche la dimensione del nostro .container. Qui sotto una tabella esplicativa, dove da dei nomi precisi ad ogni breakpoint: Extra large (LG) per desktop, Large (LG) per schermi piccoli o tablet, Medium (MD) per tablet in posizione verticale, Small (SM) per smartphone in posizione orizzontale e infine Extra small (XS) per smartphone in posizione verticale:

N.B.: Per i diversi container, per avere la dimensione interna effettiva, vanno tolti 15px di padding laterale per parte (quindi 30px).

Per gestire quindi le colonne nelle diverse situazioni, si adottano dei particolari suffissi:

• .col: Impostazione per tutti i breakpoint
• .col-sm: Impostazione i breakpoint SM, MD, LG e XL
• .col-md: Impostazione i breakpoint MD, LG e XL
• .col-lg: Impostazione per i breakpoint LG e XL
• .col-xl: Impostazione per il solo breakpoint XL

In questo modo posso definire la larghezza di una colonna in ogni singolo breakpoint, decidendo quindi se voglio che quella colonna sia larga la metà sempre, tranne che su mobile, dove voglio che occupi tutto lo spazio.

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-sm-6">...</div>
    <div class="col-lg-3 col-sm-6">...</div>
    <div class="col-lg-3 col-sm-6">...</div>
    <div class="col-lg-3 col-sm-6">...</div>
  </div>
</div>

Nell’esempio qui sopra, ho creato 4 colonne che nei breakpoint XL e LG si disporranno in un’unica riga, occupando 1/4 del contenitore. Dal breakpoint MD fino a SM invece queste colonne occuperanno metà spazio e si disporranno quindi in 2 righe. Infine, non essendo indicata alcuna regola per il breakpoint XS, le colonne occuperanno tutto lo spazio in larghezza e si disporranno quindi su 4 righe.

N.B.: Vedete come le proprietà con il breakpoint maggiore (LG nel nostro caso), sovrascrive le proprietà con breakpoint minore (SM nell’esempio).

Conclusioni

Ovviamente questa è solo un’introduzione, con l’unico scopo di farvi capire la vera utilità di un grid-system (in questo caso Bootstrap) e la semplicità di sviluppare appoggiandosi ad un framework come questo.

Chiudo l’articolo ribadendo una cosa secondo me fondamentale: se volete essere produttivi nel mondo del web siete quasi obbligati ad usare un grid-system. Quale usiate non è importante, basta che lo facciate vostro. Sarà la vostra base di partenza solida per ogni progetto web.

Buono sviluppo!