Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Suggerimento rapido: Date un nome alle vostre linee di CSS Grid

by
Read Time:3 minsLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
Understanding the CSS Grid “Auto-Placement Algorithm”
How to Use Implicit Track Sizing on Your CSS Grid

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

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!

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:

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:

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

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

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.

Potremmo definire le quattro aree della griglia così:

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.