martedì 18 febbraio 2025

Corso di CSS & Web Design: 5 – Layout con CSS Grid

5 – Layout con CSS Grid

1. Introduzione al Grid System

CSS Grid è un sistema di layout bidimensionale, che consente di posizionare elementi sia in righe (rows) che in colonne (columns), rendendo più semplice creare layout complessi e responsive rispetto a Flexbox (che è più indicato per un asse principale).

Vantaggi principali

Controllo preciso su righe e colonne.
Possibilità di ridimensionare automaticamente gli elementi.
Facilita la creazione di homepage, magazine, dashboard.

2. Container Grid e Items

2.1 Container Grid

Per definire un container grid:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* definizione colonne */
  grid-template-rows: 100px auto 50px; /* definizione righe */
  gap: 15px; /* spazio tra righe e colonne */
}

fr = frazioni dello spazio disponibile.
gap = distanza tra righe e colonne.
grid-template-columns e grid-template-rows definiscono la struttura del layout.

2.2 Items

Gli elementi figli del container grid diventano automaticamente grid items.

Possono essere posizionati usando:

grid-column: colonna di inizio/fine.
grid-row: riga di inizio/fine.

.item1 {
  grid-column: 1 / 3; /* occupa colonne 1 e 2 */
  grid-row: 1 / 2;    /* prima riga */
}

3. Proprietà principali del container

Proprietà	Funzione
display: grid	Trasforma l’elemento in container Grid
grid-template-columns/rows	Definisce numero e dimensione di colonne/righe
gap	Spaziatura tra righe e colonne
grid-auto-rows/columns	Dimensione automatica di righe o colonne non definite
justify-items / align-items	Allineamento degli items all’interno delle celle
justify-content / align-content	Allineamento dell’intera griglia all’interno del container

4. Posizionamento avanzato degli elementi

grid-column / grid-row

.item {
  grid-column: 2 / 4; /* dalla colonna 2 alla 3 inclusa */
  grid-row: 1 / 3;    /* dalla riga 1 alla 2 inclusa */
}

grid-area
- Consente di definire area nomi:

.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Allineamento interno alle celle

.item {
  justify-self: center; /* or start, end, stretch */
  align-self: center;   /* or start, end, stretch */
}

5. Esercizio svolto: homepage di un magazine

Obiettivo

Creare una homepage con:

Header
Sidebar
Contenuto principale
Footer

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Magazine Grid</title>
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <div class="container">
    <header class="header">Header</header>
    <aside class="sidebar">Sidebar</aside>
    <main class="content">Contenuto principale</main>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

CSS (stile.css)

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Container Grid */
.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 100px auto 50px;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  gap: 15px;
  padding: 15px;
  background-color: #f2f2f2;
}

/* Header */
.header {
  grid-area: header;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* Sidebar */
.sidebar {
  grid-area: sidebar;
  background-color: #4fa3f2;
  color: white;
  padding: 15px;
}

/* Content */
.content {
  grid-area: content;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
}

/* Footer */
.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Risultato

Layout a due colonne con header e footer su tutta la larghezza.
Sidebar e contenuto principali affiancati.
Layout responsive-friendly perché la griglia può essere facilmente modificata con media queries.

SILICIO E NUVOLE