cat html-css/place-items-e-place-content-per-l.md

Lezione 42 10 min

place-items e place-content per l'allineamento

Come usare le shorthand place-items e place-content per allineare contenuti e griglia su due assi.

Proprio come Flexbox, anche CSS Grid possiede proprietà per allineare gli elementi all’interno delle loro celle o per allineare l’intera griglia all’interno del contenitore.

In Flexbox avevamo justify-content (asse principale) e align-items (asse trasversale). In Grid, dato che lavoriamo su due dimensioni simultaneamente, abbiamo un set di proprietà leggermente più speculare.

Le 4 proprietà cardinali

  1. justify-items: Allinea il contenuto di ogni singola cella sull’asse orizzontale (sinistra, centro, destra).
  2. align-items: Allinea il contenuto di ogni singola cella sull’asse verticale (alto, centro, basso).
  3. justify-content: Se la griglia nel suo complesso è più piccola del contenitore, sposta l’intera griglia sull’asse orizzontale.
  4. align-content: Se la griglia nel suo complesso è più piccola del contenitore, sposta l’intera griglia sull’asse verticale.

I valori sono i soliti che già conosci: start, end, center, stretch (il default).

Le shorthand place-*

Scrivere justify-items e align-items separatamente può essere verboso. CSS Grid offre due proprietà abbreviate: place-items e place-content.

Queste proprietà accettano due valori: il primo per l’asse verticale (align), il secondo per l’asse orizzontale (justify). Se fornisci un solo valore, verrà usato per entrambi!

place-items (Per allineare il contenuto nelle celle)

Vuoi centrare del testo all’interno di una cella della griglia sia in orizzontale che in verticale?

.griglia {
  display: grid;
  /* Centra in verticale e in orizzontale */
  place-items: center; 
}

Questa singola riga di codice place-items: center; (combinata con display: grid;) è un modo compatto per centrare un elemento dentro una cella.

place-content (Per allineare l’intera griglia)

Se hai disegnato una griglia di 300x300px ma il contenitore è grande 800x800px, l’intera griglia “galleggia” in un grande spazio vuoto.

.contenitore-enorme {
  display: grid;
  /* Spinge l'intera griglia in basso a destra */
  place-content: end end; 
}

Usando le shorthand place-* puoi rendere il CSS più compatto senza perdere chiarezza.