Share
In ogni griglia CSS ogni riga ha un numero di indice a cui possiamo fare riferimento per posizionare gli elementi della griglia. Tuttavia, possiamo anche nominare ciascuna di queste linee della griglia, semplificando il lavoro e mantenendo i nostri layout di griglia. Diamo un'occhiata!
La risposta più comune a qualsiasi esercitazione Grid è "ma quando posso usare questo?" Ed è una domanda giusta. Il fatto è: Grid è venire, e sarà qui presto.
"CSS Grid diventerà supportata per impostazione predefinita in Chrome e Firefox a marzo 2017." - Eric Meyer
Se non l'hai ancora dato un'occhiata, ora è il momento!
Quando dichiariamo una griglia, a ciascuna riga viene assegnato un numero di indice:
Nota: A meno che il layout non sia impostato con direzione: rtl;, questi numeri iniziano nell'angolo in alto a sinistra della griglia, procedendo verso l'angolo in 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 .articolo l'elemento viene posizionato a partire dalla riga di colonna 2 e riga di riga 3:
Con griglie più complesse, puoi immaginare che fare riferimento a ogni cosa in base ai numeri potrebbe risultare un po 'confuso. Per questo motivo, il modulo Grid ci consente di nominare esplicitamente le nostre linee quando dichiariamo le nostre colonne e righe della griglia.
Usiamo un esempio come quelli che abbiamo usato in questa serie. Ecco la nostra dichiarazione di griglia 3 × 3 di base:
.grid-1 display: grid; grid-template-columns: 100px auto 100px; grid-template-rows: 60px 130px 50px; intercapedine: 20px;
Ora possiamo avvolgere i nostri valori di colonna e riga con i nomi delle linee (qualunque sia il diavolo che vogliamo), usando le parentesi quadre:
.grid-1 display: grid; grid-template-columns: [start] 100px [center-start] auto [last-column-start] 100px [finish]; grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end]; intercapedine: 20px;
Ora possiamo posizionare gli oggetti con i nomi, anziché i numeri:
.item grid-column: center-start; grid-row: header-start;
Alcuni suggerimenti:
Accentsconagua
[main-end footer-start row-5] eccetera.Quando facciamo deliberatamente le cose, come la denominazione delle linee della griglia, si dice che sia esplicito. Quando qualcosa è implicito, ma non direttamente dichiarato, si riferisce a ciò che è implicito. Abbiamo coperto in modo esplicito il nome delle linee della griglia, ma ci sono anche circostanze in cui le linee danno nomi impliciti.
È possibile richiamare da un precedente tutorial che è possibile definire le aree della griglia.
Potremmo definire quattro aree di griglia come questa:
.grid-1 / * ... stili esistenti * / grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
Questo ci dà il seguente:
Denominazione di un'area della griglia intestazione assegna automaticamente i nomi alle sue quattro linee di confine. Le linee di fila intorno diventano header-avvio e header-end, e allo stesso modo diventano anche le due linee di colonna header-avvio e header-end. Lo stesso vale per le altre aree, a cui vengono assegnati i nomi delle linee main-start, main-end, sidebar-start e così via.
Nota: Guardando le cose al contrario, aggiungendo esplicitamente linee con nome nello stesso formato (header-avvio e header-end) creerà un'area di griglia denominata di intestazione.
Possiamo usare questi nomi di linea proprio come abbiamo fatto in precedenza, per posizionare gli oggetti. E ancora, esistono in aggiunta ai nomi che definisci te stesso e ai numeri di indice della linea originale.
Questo è tutto per questo suggerimento veloce! Ricorda: prendi l'abitudine di nominare le tue linee e aree per una gestione e manutenzione della rete più semplice.
