Tutorial CSS: Flexbox e Grid Layout – Guida Completa

CSS è uno strumento fondamentale per creare layout web moderni, eleganti e completamente responsive. Due delle tecniche più potenti a disposizione per la progettazione dei layout sono Flexbox e CSS Grid. In questo tutorial approfondito, esamineremo ogni dettaglio di questi due strumenti, imparando a padroneggiare tutte le loro opzioni per creare layout flessibili e dinamici. L’obiettivo è di rendere accessibili queste tecniche sia per chi è all’inizio, sia per chi vuole migliorare le proprie competenze.

Cos’è Flexbox?

Flexbox (Flexible Box Layout) è stato progettato per rendere più facile la disposizione degli elementi all’interno di un contenitore, soprattutto quando si tratta di spazi variabili, allineamento e distribuzione dello spazio. Flexbox è particolarmente utile quando si ha un insieme di elementi di cui bisogna gestire l’allineamento, la distribuzione dello spazio, o la necessità di adattarsi a diverse dimensioni dello schermo.

Creare un Contenitore Flex

Per utilizzare Flexbox, il primo passo è creare un contenitore flex. Questo si fa semplicemente assegnando display: flex al contenitore principale:

.contenitore {
  display: flex;
}

Gli elementi all’interno di questo contenitore diventano automaticamente elementi flex (flex items) e possono essere manipolati utilizzando diverse proprietà.

Proprietà del Contenitore Flex

Vediamo tutte le proprietà fondamentali di un contenitore flex:

1. display: flex: Attiva Flexbox all’interno del contenitore, rendendo tutti i suoi figli degli elementi flessibili.
2. flex-direction: Definisce la direzione dell’asse principale del contenitore.

• row (default): Gli elementi sono disposti in orizzontale da sinistra a destra.
• row-reverse: Gli elementi sono disposti in orizzontale da destra a sinistra.
• column: Gli elementi sono disposti in verticale dall’alto verso il basso.
• column-reverse: Gli elementi sono disposti in verticale dal basso verso l’alto. Esempio:

   .contenitore {
     flex-direction: column;
   }

3. justify-content: Controlla come gli elementi sono distribuiti lungo l’asse principale (orizzontale se flex-direction è row, verticale se è column).

• flex-start: Gli elementi sono allineati all’inizio.
• flex-end: Gli elementi sono allineati alla fine.
• center: Gli elementi sono centrati.
• space-between: Lo spazio è distribuito uniformemente tra gli elementi, senza spazi alle estremità.
• space-around: Gli elementi hanno uno spazio uguale intorno a sé.
• space-evenly: Gli elementi hanno spazi uguali tra loro e anche alle estremità. Esempio:

   .contenitore {
     justify-content: space-around;
   }

4. align-items: Controlla l’allineamento degli elementi lungo l’asse trasversale (perpendicolare all’asse principale).

• flex-start: Gli elementi vengono allineati all’inizio dell’asse trasversale.
• flex-end: Gli elementi vengono allineati alla fine dell’asse trasversale.
• center: Gli elementi vengono allineati al centro dell’asse trasversale.
• stretch (default): Gli elementi vengono estesi per riempire l’asse trasversale.
• baseline: Gli elementi vengono allineati alla loro linea di base del testo. Esempio:

   .contenitore {
     align-items: center;
   }

5. flex-wrap: Definisce se gli elementi devono andare a capo quando lo spazio non è sufficiente.

• nowrap (default): Gli elementi rimangono su una sola linea.
• wrap: Gli elementi vanno a capo se necessario.
• wrap-reverse: Gli elementi vanno a capo, ma l’ordine di avvolgimento è invertito. Esempio:

   .contenitore {
     flex-wrap: wrap;
   }

Proprietà degli Elementi Flex

1. flex: È una proprietà shorthand per definire flex-grow, flex-shrink, e flex-basis.

• flex-grow: Definisce la capacità di un elemento di crescere rispetto agli altri elementi nel contenitore.
• flex-shrink: Definisce la capacità di un elemento di ridursi rispetto agli altri elementi nel contenitore.
• flex-basis: Definisce la dimensione iniziale di un elemento prima che lo spazio rimanente venga distribuito.

2. align-self: Permette di sovrascrivere l’allineamento dell’elemento definito da align-items.

• Valori: auto, flex-start, flex-end, center, baseline, stretch. Esempio:

   .elemento {
     align-self: flex-end;
   }

Esempio Completo di Flexbox

<div class="contenitore">
  <div class="elemento">Elemento 1</div>
  <div class="elemento">Elemento 2</div>
  <div class="elemento">Elemento 3</div>
</div>

.contenitore {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.elemento {
  background-color: #007BFF;
  color: white;
  padding: 20px;
  margin: 10px;
  flex: 1 1 200px;
}

Introduzione a CSS Grid

CSS Grid Layout è una tecnica che consente di creare layout bidimensionali complessi con un controllo dettagliato sia sulle righe che sulle colonne. A differenza di Flexbox, che funziona principalmente in una direzione (orizzontale o verticale), Grid permette di controllare contemporaneamente entrambe le dimensioni.

Creare una Griglia di Base

Per utilizzare Grid, è necessario definire un contenitore come griglia. Si inizia con display: grid.

.griglia {
  display: grid;
}

Proprietà del Contenitore Grid

1. grid-template-columns e grid-template-rows: Definiscono il numero e le dimensioni delle colonne e delle righe.

• Esempio:

   .griglia {
     grid-template-columns: 1fr 2fr 1fr;
     grid-template-rows: 100px auto 100px;
   }

In questo esempio, ci sono tre colonne, la seconda delle quali è il doppio delle altre. Per le righe, la prima e l’ultima sono di altezza fissa, mentre quella centrale si adatta al contenuto.

2. grid-gap o gap: Aggiunge spazio tra le righe e le colonne.

• Esempio:

   .griglia {
     grid-gap: 20px;
   }

3. grid-template-areas: Permette di nominare aree specifiche della griglia per una gestione più semplificata.

• Esempio:

   .griglia {
     grid-template-areas:
       "header header"
       "sidebar main"
       "footer footer";
   }

4. justify-items e align-items: Controllano l’allineamento degli elementi all’interno delle celle.

• justify-items: Allinea gli elementi lungo l’asse orizzontale (start, end, center, stretch).
• align-items: Allinea gli elementi lungo l’asse verticale (start, end, center, stretch).

Proprietà degli Elementi Grid

1. grid-column e grid-row: Definiscono la posizione e la dimensione degli elementi in termini di colonne e righe.

• Esempio:

   .elemento {
     grid-column: 1 / 3; /* L'elemento si estende dalla colonna 1 alla colonna 3 */
     grid-row: 2 / 4;   /* L'elemento si estende dalla riga 2 alla riga 4 */
   }

2. grid-area: Può essere utilizzata per assegnare un elemento a una specifica area della griglia nominata con grid-template-areas.

• Esempio:

   .header {
     grid-area: header;
   }

Esempio Completo di CSS Grid

<div class="griglia">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Contenuto Principale</main>
  <footer class="footer">Footer</footer>
</div>

.griglia {
  display: grid;
  grid-template-areas:
    'header header'
    'sidebar main'
    'footer footer';
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #444;
  color: white;
  padding: 20px;
}

.main-content {
  grid-area: main;
  background-color: #f4f4f4;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

Conclusione

Flexbox e CSS Grid sono strumenti fondamentali per ogni sviluppatore web che desidera creare layout moderni, dinamici e responsive. Mentre Flexbox è più adatto per gestire l’allineamento e la distribuzione degli elementi in una dimensione, CSS Grid offre un controllo completo su layout bidimensionali complessi. La combinazione di entrambi questi strumenti consente di ottenere il massimo in termini di flessibilità e potenza di progettazione.

Hai trovato utile questa guida? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.