In qualsiasi CSS Grid ogni linea ha un numero di indice a cui possiamo fare riferimento per posizionare gli elementi della griglia. Tuttavia, possiamo anche dare un nome a ognuna di queste linee di griglia, rendendolo più facile da lavorare e mantenere il nostro layout della griglia. Diamo un'occhiata!

Grid sta arrivando

La risposta più comune a qualsiasi tutorial di Grid è "ma quando posso usare questo?" ed è una domanda giusta. Il fatto è: Grid sta arrivando, e sarà presto qui.

"Grid CSS sta per diventare supportato per impostazione predefinita in Chrome e Firefox da marzo del 2017." – Eric Meyer

Se non ancora dato un'occhiata a questo, ora è il momento!

• CSS
  Layout con CSS Grid: Una guida introduttiva veloce
  Ian Yates
• CSS
  CSS Layout di griglia: Colonne fluide e migliori spaziature
  Ian Yates

Numeri della linea di Grid

Quando dichiariamo una griglia, a ogni linea viene assegnato un numero di indice:

Nota: A meno che il layout è impostato con direction: rtl; questi numeri iniziano dalla parte superiore sinistra della griglia, facendosi strada verso il basso a destra.

Possiamo fare riferimento a questi numeri per posizionare gli elementi della griglia:

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

In questo esempio il nostro elemento .item è posizionato a partire dalla colonna della linea 2 e la riga della linea 3:

Nomi espliciti della linea di Grid

Con griglie più complesse, potete immaginare che controllando tutto con i numeri potrebbe dare un po' di confusione. Per questo motivo, il modulo Grid ci permette di denominare in modo esplicito le nostre linee quando dichiariamo le nostre colonne e righe della griglia.

Usiamo un esempio come quelli che abbiamo usato per tutta questa serie. Ecco la nostra dichiarazione della griglia con base 3 × 3:

.grid-1 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 130px 50px;
  grid-gap: 20px;
}

Ora possiamo inserire i nostri valori di riga e di colonna con i nomi della linea (qualsiasi cosa diamine vogliamo), utilizzando le parentesi quadre:

.grid-1 {
  display: grid;
  grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish];
  grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end];
  grid-gap: 20px;
}

Ora possiamo posizionare gli elementi con nomi, invece di numeri:

.item {
  grid-column: centre-start;
  grid-row: header-start;
}

Alcune indicazioni:

• Questi nomi possono essere adattati alle proprie esigenze descrittive, quindi pensare logicamente a ciò vi aiuterà a riconoscere e ricordare le aree della griglia.
• I numeri della linea originali rimangono in funzione, quindi è ancora possibile utilizzarli.
• Potete dichiarare più nomi per una sola linea, ad esempio: [main-end footer-start row-5] ecc.
• Anche se date un nome alle linee della griglia, non siete obbligato a usarli, quindi è una buona abitudine "nel caso che" entriate.

Nomi della linea implicita di Grid

Quando facciamo deliberatamente le cose, come dare un nome alle linee della griglia, che sia esplicito. Quando qualcosa è implicita, ma non direttamente indicato, che è indicato come implicita. Abbiamo coperto in modo esplicito la denominazione delle linee della griglia, ma ci sono anche circostanze dove alle linee vengono assegnati nomi in modo implicito.

Potete ricordare da un tutorial precedente che è possibile definire le aree della griglia.

• CSS
  CSS Grid Layout: Usare le aree di Grid
  Ian Yates

Potremmo definire le quattro aree della griglia così:

.grid-1 {
    /* ..existing styles */
     
    grid-template-areas:    "header header header"
                            "main main sidebar"
                            "footer footer footer";
}

Questo ci dà il seguente:

Nominare un'area della griglia header automaticamente assegna anche i nomi ai suoi quattro confini. Le linee della riga intorno ad esso diventano header-start e header-end, e inoltre anche le due colonne delle linee diventano header-start e header-end. Lo stesso vale per le altre aree, a cui sono dati i nomi linea main-start, main-end, sidebar-start e così via.

Nota: Guardando le cose in senso inverso, aggiungendo le linee denominate in modo esplicito nello stesso formato (header-start e header-end) creerà un'area della griglia denominata header.

Possiamo usare questi nomi di linea proprio come abbiamo precedentemente, per posizionare gli elementi. E ancora, esistono oltre ai nomi che definite e i numeri di indice della linea originale.

Fine della linea

Questo è tutto per questo suggerimento! Ricordate: prendete l'abitudine di dare un nome alle linee e alle aree per la manutenzione e gestione più facile della griglia.