Skip to content

Schema riassuntivo del Layout CSS Grid

Questa pagina fornisce uno schema riassuntivo visivo per il layout CSS Grid, incluse le proprietà principali per il contenitore grid, gli elementi grid ed esempi pratici di layout.

Contenitore Grid (Grid Container)

Proprietà Valore Descrizione
display grid Definisce l’elemento come un contenitore grid
grid-template-columns 100px 1fr Definisce la larghezza delle colonne
grid-template-rows 100px 1fr Definisce l’altezza delle righe
grid-template-areas header header
sidebar main
footer footer		 Definisce la griglia nominando le aree
grid-column-gap 10px Definisce lo spazio tra le colonne
grid-row-gap 10px Definisce lo spazio tra le righe
grid-gap 10px 20px Definisce contemporaneamente lo spazio tra righe e colonne
justify-items start Definisce l’allineamento orizzontale degli elementi grid all’interno delle celle
align-items start Definisce l’allineamento verticale degli elementi grid all’interno delle celle
justify-content start Definisce l’allineamento orizzontale dell’intera griglia all’interno del contenitore
align-content start Definisce l’allineamento verticale dell’intera griglia all’interno del contenitore

Elementi Grid (Grid Items)

Proprietà Valore Descrizione
grid-column 1 / 3 Definisce le colonne occupate dall’elemento
grid-row 1 / 3 Definisce le righe occupate dall’elemento
grid-area header Posiziona un elemento grid tramite un’area nominata
justify-self start Definisce l’allineamento orizzontale di un singolo elemento nella sua cella
align-self start Definisce l’allineamento verticale di un singolo elemento nella sua cella
grid-column-start 1 Definisce la linea di inizio colonna per l’elemento
grid-column-end 3 Definisce la linea di fine colonna per l’elemento
grid-row-start 1 Definisce la linea di inizio riga per l’elemento
grid-row-end 3 Definisce la linea di fine riga per l’elemento

Esempio di Media Query 

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

Altri Esempi

Layout a due colonne 

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

Layout a tre colonne 

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

Centratura Verticale 

.container {
  display: grid;
  align-items: center;
}

Centratura Orizzontale 

.container {
  display: grid;
  justify-items: center;
}