Skip to content

Cheat Sheet sul layout CSS Grid

Questa pagina fornisce una cheat sheet visiva del layout CSS Grid, comprese le proprietà principali per i contenitori griglia e gli elementi griglia, insieme a esempi pratici di layout.

Contenitore Griglia (Grid Container)

Proprietà Valore Descrizione
display grid Definisce l’elemento come un contenitore griglia
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 simultaneamente lo spazio tra righe e colonne
justify-items start Allinea gli elementi della griglia orizzontalmente all’interno delle celle
align-items start Allinea gli elementi della griglia verticalmente all’interno delle celle
justify-content start Allinea l’intera griglia orizzontalmente all’interno del contenitore
align-content start Allinea l’intera griglia verticalmente all’interno del contenitore

Elementi Griglia (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 gli elementi della griglia nominando le aree
justify-self start Allinea un singolo elemento della griglia orizzontalmente all’interno della sua cella
align-self start Allinea un singolo elemento della griglia verticalmente all’interno della sua cella
grid-column-start 1 Definisce la linea di inizio della colonna
grid-column-end 3 Definisce la linea di fine della colonna
grid-row-start 1 Definisce la linea di inizio della riga
grid-row-end 3 Definisce la linea di fine della riga

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;
}