guida CSS

CSS Grid è un sistema di layout potente e flessibile che permette di creare griglie bidimensionali, organizzando i contenuti su righe e colonne. È particolarmente utile quando si desidera disporre sezioni come header, aside, content e footer in modo elegante e responsivo.

Nell’immagine di esempio, vediamo un layout con:

• Header in alto,
• Sidebar e Content affiancati al centro,
• Footer in basso.

Vediamo come replicare lo stesso risultato con HTML e CSS Grid.

---

Il markup (HTML)

Creiamo una struttura semantica semplice, utilizzando il tag <main> per contenere tutti gli elementi principali:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8" />
  <title>CSS Grid Esempio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <main>
    <header>Header</header>
    <article>Content</article>
    <aside>Sidebar</aside>
    <footer>Footer</footer>
  </main>

</body>
</html>

• <header>, <article>, <aside> e <footer> sono tag HTML semantici: descrivono con chiarezza il ruolo di ciascun blocco nel layout.
• Tutto è racchiuso nel <main>, che utilizzeremo come container della griglia.

---

Il foglio di stile (CSS)

Nel file style.css, imposteremo il layout a griglia e definiremo come gli elementi verranno posizionati:

/* Diamo uno stile di base alla pagina (non indispensabile ma aiuta la leggibilità) */
body {
  margin: 0;
  font-family: sans-serif;
}

/* Contenitore principale */
main {
  display: grid;                             /* Attiva CSS Grid */
  grid-template-areas: 
    "head head head"                         /* RIGA 1: tre celle, tutte 'head' */
    "side content content"                   /* RIGA 2: 'side' + 'content' + 'content' */
    "foot foot foot";                        /* RIGA 3: tre celle, tutte 'foot' */
  
  grid-template-rows: 50px auto 50px;        /* Altezza delle righe */
  /* Se desideri un layout più complesso, puoi specificare anche le colonne:
     grid-template-columns: 1fr 2fr 1fr; 
     (Esempio con una colonna più stretta per la sidebar e due più ampie) */
}

/* Assegnazione delle aree alle singole sezioni */
header {
  grid-area: head;   /* Il tag <header> occuperà l'area definita come 'head' */
}
article {
  grid-area: content;/* Il tag <article> occuperà l'area definita come 'content' */
}
aside {
  grid-area: side;   /* Il tag <aside> occuperà l'area definita come 'side' */
}
footer {
  grid-area: foot;   /* Il tag <footer> occuperà l'area definita come 'foot' */
}

/* Stili di base per distinguere le sezioni */
header, article, aside, footer {
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffffff;
}

header {
  background-color: #f39c12; /* Arancione */
}
article {
  background-color: #3498db; /* Blu */
}
aside {
  background-color: #2ecc71; /* Verde */
}
footer {
  background-color: #95a5a6; /* Grigio */
}

Spiegazione del CSS

1. display: grid;
   Abilita la modalità a griglia sul contenitore <main>.
2. grid-template-areas
   Definisce il layout riga per riga, stabilendo i nomi delle aree in cui le celle di griglia verranno suddivise.
   • RIGA 1: "head head head"
   • RIGA 2: "side content content"
   • RIGA 3: "foot foot foot"
3. grid-template-rows
   Specifica le altezze delle righe: 50px per la prima, auto per la seconda (in modo che si adatti al contenuto), e 50px per la terza.
4. (Opzionale) grid-template-columns
   Puoi specificare anche quante colonne e le loro dimensioni (es. 1fr 2fr 1fr) se desideri un maggiore controllo sulle larghezze.
5. grid-area
   All’interno di <header>, <article>, <aside>, <footer> utilizziamo grid-area: nomeArea; per assegnare ciascun elemento alla sua area corrispondente definita in grid-template-areas.
6. Stili di base
   • Aggiunti bordi, colori di sfondo e centrature per distinguere visivamente le varie sezioni.