CSS Grid Box Childs

Concludiamo in linea teorica i CSS Grid Box Layout trattando i CSS Grid Box Childs, ossia i discendenti di un display:grid.
Le proprietà dei figli sono per nostra fortuna sono leggermente più semplici 🙂

Abbiamo la macro categoria composta da:

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

Le quali definiscono la posizione di un singolo elemento della griglia all’interno della riga o colonna di cui fa parte.
Questa è la sintassi:

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}
</name></number></name></number></name></number></name></number></name></number></name></number></name></number></name></number>

Limitiamoci ad analizzare solamente i valori numerici () e auto.

  • il numero indica l’estensione sulla riga o sulla colonna.
  • auto, invece indica il posizionamento automatico.
.item-a {
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}

Attenzione gli indici partono da 1 e non da 0!

css grid box childs example

Esempio di CSS Grid Box Childs numerico

Le scorciatoie delle rispettive proprietà sopra citate sono:

  1. grid-column, per grid-column-start e grid-column-end.
  2. grid-row, per grid-row-start e grid-row-end.

Non a caso la regola precedente si trasforma in:

.item-a {
  grid-column: 2 5;
  grid-row: 1 3;
}

Per concludere come detto prima nel tutorial CSS Grid Box Container i singoli elementi delle grigie disposti su colonne o righe possono essere indipendenti dal padre utilizzando align-self e justify-self.

1)justify-self, allinea il contenuto all’interno di un elemento della griglia lungo l’asse della riga che lo contiene, esso accetta i seguenti valori:

  • start: il singolo grid item viene allineato all’estremità sinistra della griglia (all’inizio).
  • end: il singolo grid item viene allineato all’estremità destra della griglia (alla fine).
  • center: il singolo grid item viene allineato sull’asse orizzontale del loro contenitore padre.
  • stretch: il singolo grid item viene allineato viene riempito affinchè occupi in larghezza tutto il box che li contiene.

Per impostare l’allineamento per tutti gli elementi di una griglia sulla riga, vedere la proprietà justify-items sul CSS Grid Box Container.

1)align-self, allinea il contenuto all’interno di un elemento della griglia lungo l’asse della colonna che lo contiene, esso accetta i seguenti valori:

  • start: il singolo grid item viene allineato all’estremità superiore della griglia (in alto).
  • end: il singolo grid item viene allineato all’estremità inferiore della griglia (in basso).
  • center: il singolo grid item viene allineato al centro sull’asse verticale del loro contenitore padre.
  • stretch: il singolo grid item riempie in altezza tutto il box che li contiene.

Per impostare l’allineamento per tutti gli elementi di una griglia sulla colonna, vedere la proprietà align-items sul CSS Grid Box Container.

Vai siamo pronti giochiamo con i CSS Grid Box Garden 😉

CSS Grid Box Childs ultima modidfica: 2018-01-31T22:06:30+01:00 da Gianluca Di Vincenzo