InnoMarts logo
InnoMarts
Fast websites
← Back to course

Layout con CSS Grid

Layout con CSS Grid

Bentornato.

Nella lezione precedente hai imparato Flexbox.

Flexbox è ottimo per organizzare elementi in una direzione.

Righe.

Colonne.

Cose centrate.

La vita è diventata leggermente meno caotica.

Ora incontriamo CSS Grid.

Grid serve per layout bidimensionali.

Questo significa righe e colonne insieme.

Flexbox è come sistemare sedie in una fila.

Grid è come progettare tutta la stanza.

Muri.

Tavoli.

Finestre.

Quella sedia che nessuno sa dove mettere.

Grid ti dà un controllo serio sul layout.

E sì, all’inizio può sembrare un po’ intimidatorio.

Ma niente panico.

Grid non è un mostro.

È solo un foglio di calcolo molto organizzato con più senso dello stile.

Cosa Imparerai

In questa lezione imparerai:

Cos’è CSS Grid?

CSS Grid è un sistema di layout per organizzare elementi in righe e colonne.

Ti aiuta a creare layout come:

Flexbox è migliore per una direzione.

Grid è migliore per due direzioni.

Esempio:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Questo crea tre colonne uguali.

Ogni 1fr significa una frazione dello spazio disponibile.

CSS fa i calcoli.

Per una volta non devi calcolare tutto a mano come un contabile stanco con una tastiera.

Grid vs Flexbox

Usa Flexbox quando ti serve una direzione:

Usa Grid quando ti servono righe e colonne:

Flexbox dice:

“Lasciami organizzare questi elementi in una linea.”

Grid dice:

“Dammi tutta la pianta della stanza.”

Entrambi sono utili.

Nessuno dei due è magia.

Ma Grid a volte sembra magia quando il layout finalmente smette di combatterti.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson6
cd css-lesson6
touch index.html
touch style.css

Dovresti avere:

css-lesson6/
  index.html
  style.css

Apri la cartella nel tuo editor.

Costruiremo una pagina con course cards.

Avrà:

Idea semplice.

Pattern molto utile.

Userai questo tipo di layout ovunque.

Corsi.

Blog posts.

Servizi.

Progetti portfolio.

Anche menu pizza, se la pizza prende sul serio l’architettura frontend.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout con CSS Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Layout con CSS Grid</h1>
    <p>Costruisci righe e colonne pulite senza perdere l’anima.</p>
  </header>

  <main class="page">
    <section class="intro">
      <h2>Argomenti del Corso</h2>
      <p>
        CSS Grid ci aiuta a creare layout bidimensionali potenti usando righe e colonne.
      </p>
    </section>

    <section class="course-grid">
      <article class="course-card">
        <h2>HTML Basics</h2>
        <p>Impara la struttura delle pagine web.</p>
      </article>

      <article class="course-card">
        <h2>CSS Styling</h2>
        <p>Rendi le pagine leggibili, pulite e belle.</p>
      </article>

      <article class="course-card">
        <h2>Flexbox</h2>
        <p>Allinea elementi in righe o colonne.</p>
      </article>

      <article class="course-card">
        <h2>CSS Grid</h2>
        <p>Costruisci layout con righe e colonne insieme.</p>
      </article>

      <article class="course-card">
        <h2>Responsive Design</h2>
        <p>Fai funzionare i siti su diverse dimensioni di schermo.</p>
      </article>

      <article class="course-card">
        <h2>Animazioni</h2>
        <p>Aggiungi movimento fluido ed effetti interattivi.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Creato mentre imparo CSS Grid.</p>
  </footer>
</body>
</html>

Questo ci dà sei card.

Senza CSS, appariranno una sotto l’altra.

Va bene.

HTML sta facendo il suo lavoro.

Ora CSS Grid entra con una cartellina e dice:

“Organizziamo tutto.”

Inizia con gli Stili Base

Apri style.css e aggiungi:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

Questo crea un header semplice.

Ora aggiungi il container della pagina:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

Questo centra il contenuto principale e limita la larghezza.

Un layout senza max width può diventare troppo largo.

E il testo troppo largo è doloroso da leggere.

Come guardare una frase correre una maratona attraverso il monitor.

Crea un Grid Container

Per creare una grid, usa:

display: grid;

Aggiungi questo:

.course-grid {
  display: grid;
}

Ora .course-grid diventa un grid container.

I figli diretti diventano grid items.

Nel nostro caso, ogni .course-card diventa un grid item.

Ma non succede ancora nulla di drammatico.

Abbiamo creato il grid container.

Ora dobbiamo definire le colonne.

CSS aspetta istruzioni.

Come un assistente molto severo senza immaginazione.

Definisci le Colonne della Grid

Usa grid-template-columns per definire le colonne.

Aggiungi questo:

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Questo crea tre colonne.

Ogni colonna riceve una parte uguale dello spazio disponibile.

fr significa frazione.

Quindi questo:

grid-template-columns: 1fr 1fr 1fr;

significa:

Dividi lo spazio disponibile in tre parti uguali.

Ora hai una grid a tre colonne.

CSS non si è lamentato.

Un momento raro e bellissimo.

L’Unità fr

L’unità fr significa una frazione dello spazio disponibile.

Esempio:

grid-template-columns: 1fr 2fr;

Questo crea due colonne.

La seconda colonna è larga il doppio della prima.

Esempio:

grid-template-columns: 1fr 1fr 1fr;

Questo crea tre colonne uguali.

L’unità fr è molto utile perché si adatta allo spazio disponibile.

Non devi scrivere:

width: 33.333333%;

Quel numero sembra un foglio Excel con il mal di testa.

Usa fr.

Più pulito.

Più amichevole.

Meno sospetto.

Aggiungi Gap tra gli Elementi

Ora le card potrebbero essere troppo vicine.

Aggiungi gap:

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

gap crea spazio tra righe e colonne.

È più pulito che aggiungere margin manualmente a ogni card.

Una buona spaziatura rende i layout leggibili.

Una cattiva spaziatura fa sembrare la pagina come se tutti stessero troppo vicini in ascensore.

Nessuno lo vuole.

Nemmeno le tue card.

Stilizza le Card

Aggiungi questo:

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Ora le card sembrano vere card.

Sfondo bianco.

Padding.

Border.

Angoli arrotondati.

Un layout calmo e ordinato.

Niente urla.

Niente caos.

Solo box organizzate, che è esattamente ciò che CSS voleva segretamente da sempre.

Stilizza la Sezione Intro

Aggiungi questo:

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

La sezione intro ora ha:

È un pattern comune.

Una intro box evidenziata.

Semplice.

Chiara.

Non sta cercando di diventare un circo.

Bene.

Usa repeat

Scrivere questo va bene:

grid-template-columns: 1fr 1fr 1fr;

Ma CSS ci dà una versione più pulita:

grid-template-columns: repeat(3, 1fr);

Questo significa:

Crea 3 colonne, ognuna larga 1fr.

Aggiorna .course-grid:

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

È più facile da leggere.

Specialmente quando hai più colonne.

Per esempio:

grid-template-columns: repeat(4, 1fr);

Quattro colonne uguali.

Semplice.

Elegante.

CSS che per un attimo indossa un completo.

Colonne Fisse e Flessibili

Puoi combinare colonne fisse e flessibili.

Esempio:

grid-template-columns: 250px 1fr;

Questo crea:

Esempio:

grid-template-columns: 200px 1fr 1fr;

Questo crea:

È utile per dashboard o layout con sidebar.

Ma per semplici card, repeat(3, 1fr) è perfetto.

Non complicare troppo.

CSS ha già abbastanza posti dove nascondere problemi.

Grid Rows

Grid può anche definire righe.

Esempio:

grid-template-rows: auto auto;

Ma spesso le righe vengono create automaticamente.

Nel nostro card grid, definiamo le colonne.

Il browser crea le righe quando servono.

Sei card.

Tre colonne.

Risultato:

Molto comodo.

Il browser fa la parte noiosa.

Glielo permettiamo.

Card con Altezza Uguale

Gli elementi Grid nella stessa riga si allungano naturalmente alla stessa altezza di default.

Questo significa che se una card ha più testo, la riga può comunque apparire allineata.

È uno dei motivi per cui Grid è ottimo per le card.

Puoi anche organizzare meglio il contenuto dentro ogni card usando Flexbox.

Sì, Flexbox e Grid possono lavorare insieme.

Non sono nemici.

Sono colleghi.

A volte colleghi strani.

Ma comunque colleghi.

Problema Responsive della Grid

La nostra grid ha tre colonne:

grid-template-columns: repeat(3, 1fr);

Questo va bene su desktop.

Ma su un piccolo schermo telefono, tre colonne possono diventare troppo strette.

Le card soffrono.

Il testo soffre.

Gli utenti soffrono.

E poi tutti danno la colpa a CSS.

Quindi ci serve responsive design.

Studieremo responsive design meglio nella prossima lezione, ma possiamo già fare un miglioramento semplice.

Grid Responsive Semplice

Aggiungi questo in fondo al CSS:

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

Questo significa:

Ora il layout si adatta.

Le card respirano.

Il telefono non piange.

Buon comportamento responsive.

Molto importante.

CSS Completo

Il tuo style.css dovrebbe essere così:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

Salva.

Aggiorna.

Ridimensiona il browser.

Guarda la grid cambiare.

Tre colonne.

Due colonne.

Una colonna.

Questo è CSS Grid che fa un lavoro serio.

In silenzio.

Come un professionista che non ha bisogno di applausi ma merita assolutamente un caffè.

Errori Comuni

Dimenticare display grid

Sbagliato:

.course-grid {
  grid-template-columns: repeat(3, 1fr);
}

Corretto:

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Senza display: grid, le proprietà grid non fanno nulla.

CSS ignorerà semplicemente i tuoi bellissimi piani.

Freddo.

Ma prevedibile.

Creare Troppe Colonne

Questo può sembrare buono su uno schermo enorme:

grid-template-columns: repeat(6, 1fr);

Ma su schermi piccoli diventa illeggibile.

Non forzare troppe colonne.

Il layout deve servire il contenuto.

Non strizzarlo come una valigia prima di un volo economico.

Dimenticare gap

Una grid senza gap può sembrare affollata.

Meglio:

.course-grid {
  display: grid;
  gap: 24px;
}

La spaziatura conta.

Il tuo contenuto ha bisogno di spazio.

Anche il tuo cervello.

Pratica

Crea una pagina con:

Usa CSS Grid per creare:

Usa:

Cambia il numero di card.

Prova 4.

Prova 8.

Prova 10.

Guarda come Grid crea righe automaticamente.

Il browser sta facendo lavoro di layout per te.

Lascialo fare.

È per questo che abbiamo gli strumenti.

Mini Sfida

Crea una project gallery.

Ogni card dovrebbe avere:

Usa Grid per mostrare i progetti in tre colonne.

Rendi una card speciale con una classe:

<article class="project-card featured">

Poi stilizzala diversamente:

.featured {
  border-color: #2563eb;
}

Prova a rendere la grid responsive.

Questo è un pattern reale da portfolio.

Puoi usarlo per i tuoi progetti.

E sì, ora i tuoi progetti possono stare in righe come piccoli soldati disciplinati.

Soldati frontend.

Con border radius.

Riassunto

Oggi hai imparato che:

Grid è potente.

Flexbox resta utile.

Lavorano insieme.

Usa Flexbox per una direzione.

Usa Grid per righe e colonne.

Usa entrambi quando serve.

Non è barare.

È saggezza frontend.

Prossima Lezione

Nella prossima lezione impareremo responsive design.

Perché una pagina che sembra bella solo sul tuo laptop non è finita.

È solo sicura di sé in una stanza sola.