Proprietà degli articoli della griglia in CSS | Spiegato
Questo articolo presenterà una panoramica approfondita delle proprietà dell'articolo della griglia CSS e sarà organizzata come segue:
- Quali sono gli articoli della griglia?
- Proprietà degli articoli della griglia in CSS
- Sintassi delle proprietà degli articoli della griglia CSS
- Come utilizzare le proprietà dell'articolo della griglia
Quindi, iniziamo!
Quali sono gli articoli della griglia?
Gli articoli all'interno del contenitore a griglia CSS sono noti come elementi della griglia o elementi figlio.
Proprietà degli articoli della griglia in CSS
CSS fornisce numerose proprietà per lavorare con gli articoli della griglia CSS. La tabella indicata di seguito illustra diverse proprietà degli elementi della griglia:
| Proprietà | Descrizione |
|---|---|
| Grid-Column-Start & Grid-Row-Start | Queste proprietà determinano la posizione degli elementi della griglia specificando dove avviare l'articolo. |
| Grid-Column-End e Grid-Row-end | Queste proprietà determinano la posizione degli elementi della griglia specificando dove terminare l'elemento della griglia. |
| colonna griglia | È una proprietà stentata per le proprietà della griglia-colonna e della griglia-colonna. |
| ROW GRID | È una proprietà stenorta che viene utilizzata per ottenere le funzionalità della griglia-row-start e della fine della rete. |
| area della griglia | Specifica il nome dell'elemento della griglia o può essere utilizzato per ottenere le funzionalità di più proprietà i.e. Grid-Row-Start, Grid-Column-Start, Grid-Row-End e Grid-Column-End. |
| Giustifica-sé | Allinea un elemento della griglia all'interno di una cella lungo l'asse di riga/in linea. |
| allinearsi | Allinea un elemento della griglia all'interno di una cella lungo l'asse della colonna/blocco. |
| luogo-sé | È una proprietà stenografica per due proprietà i.e. allineare e giustificare-sé. |
Sintassi
Lo snippet indicato di seguito ti aiuterà a comprendere la sintassi di base delle proprietà degli elementi della griglia:
Proprietà nome: valore (s);Il nome della proprietà sarà seguito dal colon ":" e quindi i valori saranno specificati dall'altra parte del colon e questi valori decideranno quale funzionalità verrà eseguita dall'elemento della griglia.
Come utilizzare le proprietà dell'articolo della griglia
A partire da ora abbiamo una comprensione di base delle proprietà degli articoli della griglia, ora sposteremo un ulteriore passo avanti e implementeremo praticamente le proprietà sopra descritte.
Esempio
Supponiamo che abbiamo due righe e quattro colonne e abbiamo un totale di sei elementi della griglia. Ora specificheremo i primi quattro elementi nella prima riga e gli ultimi due elementi nella seconda riga:
Modello di layout della griglia
Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento
Sesto elemento
Dallo snippet sopra, possiamo osservare che nel tag del corpo abbiamo un elemento genitore e sei elementi figlio. Nel tag principale, abbiamo specificato lo stile sia per gli elementi dei genitori che per i figli. Inoltre, poiché vogliamo implementare uno stile specifico su Classe Item5 e Classe Item-Class6, quindi li abbiamo disegnati separatamente:
L'output verifica il funzionamento della colonna a griglia e delle proprietà della fila griglia.
Allo stesso modo, possiamo utilizzare le proprietà degli oggetti della griglia rimanenti a seconda delle nostre esigenze.
Conclusione
Gli articoli all'interno del contenitore a griglia CSS sono noti come elementi della griglia o elementi figlio. CSS fornisce numerose proprietà per funzionare con elementi a griglia CSS come la griglia-colonna-start, la parte della griglia-row-start specifica la posizione iniziale dell'articolo, giustifica-sé, allineare le proprietà allinea un elemento a griglia all'interno di una cella lungo l'asse di riga/in linea , rispettivamente asse colonna/blocco. Allo stesso modo, ci sono molte altre proprietà degli articoli della griglia CSS che possono essere utilizzati per servire varie funzionalità.