Frontend Academy · Lezione

CSS Grid per il layout

Definisca righe e colonne con CSS Grid, posizioni gli elementi con precisione e crei layout comuni per le pagine con una quantità minima di codice.

CSS Grid per il layout è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Che cos'è CSS Grid?

CSS Grid è un sistema di layout bidimensionale: consente di controllare sia le righe sia le colonne. È lo strumento migliore per la struttura generale della pagina e per il posizionamento esplicito degli elementi all'interno di una griglia definita.

Definire le colonne: grid-template-columns

grid-template-columns definisce la struttura delle colonne. Utilizzi dimensioni fisse (px), frazioni flessibili (fr) oppure auto. repeat(n, size) ripete la definizione di una traccia.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

L'unità fr

fr (unità frazionaria) distribuisce proporzionalmente lo spazio rimanente. 1fr 2fr assegna alla seconda colonna il doppio dello spazio della prima. È essenziale per creare tracce di griglia fluide.

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left center right */
}

Definire le righe: grid-template-rows

Può definire esplicitamente anche le righe. In caso contrario, il browser crea automaticamente righe implicite. grid-auto-rows: minmax(200px, auto) dimensiona le righe implicite.

.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header content footer */
  min-height: 100vh;
}

gap in Grid

Come in Flexbox, gap aggiunge spazio tra le tracce della griglia senza influire sui bordi esterni. row-gap e column-gap controllano separatamente i due assi.

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

grid-template-areas

Assegni un nome alle aree della griglia usando stringhe e assegni gli elementi a tali aree con grid-area. In questo modo il codice del layout diventa leggibile e visivo.

.page {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

Posizionare gli elementi con grid-column e grid-row

Controlli esattamente la posizione di un elemento con grid-column: start / end e grid-row: start / end. Utilizzi -1 per fare riferimento all'ultima linea. span N estende l'elemento su N tracce.

.featured {
  grid-column: 1 / -1;  /* span all columns */
  grid-row: span 2;      /* occupy two rows */
}

auto-fit e minmax() — colonne responsive

La singola riga più potente per una griglia responsive è: repeat(auto-fit, minmax(280px, 1fr)). Crea il maggior numero possibile di colonne, ciascuna larga almeno 280px, e distribuisce lo spazio rimanente con 1fr.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

auto-fill e auto-fit a confronto

auto-fill crea tracce anche quando sono vuote, mantenendo una griglia fissa. auto-fit comprime le tracce vuote, così gli elementi si espandono fino a riempire la riga. Utilizzi auto-fit per i contenuti che devono estendersi.

Griglia implicita ed esplicita

Le tracce definite da Lei costituiscono la griglia esplicita. Quando aggiunge più elementi rispetto alle tracce definite, il browser crea tracce implicite. Ne controlli le dimensioni con grid-auto-rows e grid-auto-columns.

Grid e Flexbox — quando utilizzare ciascuno

Grid: layout bidimensionali, struttura delle pagine, gallerie e dashboard. Flexbox: righe o colonne unidimensionali, centratura e distribuzione degli elementi in una riga. Si completano a vicenda: utilizzi Grid per lo scheletro della pagina e Flexbox per gli elementi interni dei componenti.

Verifica rapida

Quale valore CSS crea colonne larghe almeno 250px e distribuisce equamente lo spazio rimanente?

Riepilogo: CSS Grid

grid-template-columns definisce le colonne. fr distribuisce lo spazio. repeat() semplifica le ripetizioni. gap aggiunge le spaziature. grid-template-areas rende leggibili i layout. auto-fit + minmax crea griglie responsive senza media query. Grid è la scelta principale per i layout di pagina bidimensionali.

Domande Frequenti

La lezione «CSS Grid per il layout» è gratuita?

Sì — il testo completo di «CSS Grid per il layout» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «CSS Grid per il layout»?

Definisca righe e colonne con CSS Grid, posizioni gli elementi con precisione e crei layout comuni per le pagine con una quantità minima di codice. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «CSS Grid per il layout»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Frontend Academy