Proprietà del contenitore a griglia in CSS | Spiegato
Questo articolo fornirà una guida completa per il contenitore della griglia e, a questo proposito, coprirà i seguenti concetti fondamentali di contenitore a griglia:
- Cos'è un contenitore a griglia in CSS
- La proprietà del display
- Proprietà del contenitore della griglia in CSS
- Come utilizzare le proprietà del contenitore della griglia in CSS
Quindi, iniziamo!
Cos'è un contenitore a griglia?
Un contenitore a griglia è una scatola/contenitore che contiene elementi della griglia e può posizionare questi elementi all'interno delle righe e delle colonne.
La proprietà del display
Per creare un contenitore a griglia, dobbiamo utilizzare la proprietà del display e impostare il suo valore come griglia in linea o griglia. Lo snippet seguente mostra la sintassi di base della proprietà del display:
Visualizza: valore;Esempio 1
Nel frammento di codice di seguito, creeremo un contenitore a griglia e all'interno del contenitore dichiareremo cinque elementi figlio:
Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento
Sesto elemento
Le rispettive classi di stile per gli oggetti di container e griglia della griglia saranno così:
Lo snippet di codice sopra mostrerà il seguente output:
L'output verifica che sia gli articoli del contenitore a griglia che della griglia siano disegnati in base alle rispettive classi di stile.
Proprietà del contenitore della griglia in CSS
La tabella indicata di seguito fornirà una breve guida per le proprietà del contenitore della griglia:
| Proprietà | Descrizione |
|---|---|
| colonne a griglia-timPlate-colonne e righe a griglia | Determinare la dimensione delle colonne e delle righe all'interno di un contenitore a griglia e queste proprietà possono prendere un elenco di valori separati dallo spazio E.G. tack-size, nome di linea. |
| areas a griglia | Determina come mostrare righe e colonne utilizzando gli elementi della griglia denominati. |
| Grid-Template | È una proprietà stentata utilizzata per ottenere le funzionalità di tre proprietà, i.e., colonne a griglia-sumplate, file di griglia e aree della griglia. |
| ROW-GAP e colonna-gap | Queste proprietà determinano rispettivamente il divario tra le righe della griglia e le colonne della griglia. |
| GAP-COLUMN-GAP e GAP GRID-ROW | Queste proprietà vengono utilizzate per specificare la dimensione dello spazio tra le colonne della griglia e le righe della griglia, rispettivamente. |
| griglia-gap | È una proprietà stenografica utilizzata per ottenere le funzionalità di due proprietà i.e. GAP-COLUMN-GAP e GAP GRID-ROW |
| Justify-Items | Allinea gli elementi della griglia lungo l'asse righe/inline. |
| allineare | Allinea gli elementi della griglia lungo le colonne/asse in linea. |
| Place-Items | È una proprietà stensa per gli elementi di allineamento e le proprietà di giustificazioni, che impostano entrambi in un'unica dichiarazione. |
| giustificare il contenuto | Allinea la griglia lungo l'asse righe/in linea |
| contenuto align | Allinea la griglia lungo le colonne/asse di blocco |
| Contesto | È una proprietà stenorta per il contenuto di allineamento e il contenuto di giustificare. |
| Grid-auto-colonne | Determina la dimensione predefinita per le colonne. |
| Grid-auto-rows | Definisce la dimensione predefinita per le righe. |
| flow grid-auto | Determina come vengono aggiunti gli elementi automatici automatici nella griglia CSS. |
| griglia | È una proprietà stenografica per più proprietà della griglia (i.e. ROWS-TEMPLATE ROWS, colonne a griglia-temperatura, aree a griglia-template-aree, griglia-pilo, griglia-auto-colonne e flow a griglia-auto). |
Come utilizzare le proprietà del contenitore della griglia in CSS
Ora implementeremo praticamente alcune delle proprietà sopra descritte per una profonda comprensione.
Le proprietà delle colonne a griglia e della griglia-rows
Queste proprietà possono assumere più valori separati dallo spazio come auto, percentuale, ecc.
Modifichiamo un po 'di esempio1; Nell'esempio seguente, tutto il codice rimarrà lo stesso tranne la proprietà della griglia-timlate-colonne.
Esempio 2
In questo esempio, aggiungeremo una proprietà Grid-Template-Colons per specificare la dimensione delle colonne di nostra scelta:
colonne a griglia-template: 1fr Auto Auto;Dallo snippet sopra, possiamo osservare che la larghezza della prima colonna è "1fr", e la larghezza delle restanti due colonne è "auto".
Pertanto la larghezza di prima colonna sarà diversa dalle restanti due colonne:
Allo stesso modo, possiamo usare il ROWS GRID-TEMPLATE Proprietà per specificare la dimensione delle righe.
La proprietà align-content
Per allineare la griglia lungo l'asse o le colonne verticali/blocchi, possiamo usare la proprietà align-content e possono richiedere valori diversi per eseguire funzionalità diverse come "Center", "Start", "End", "Space-unily", eccetera.
Esempio 3
In questo esempio, utilizzeremo la proprietà align-content e imposteremo il suo valore come "fine" per impostare/allineare le righe alla fine del contenitore. Lo snippet di codice seguente mostra il codice per la classe container mentre la classe elemento e il codice HTML rimarranno gli stessi degli esempi precedenti:
.Classe contenitoredisplay: griglia;
colonne a griglia-template: auto automatica;
Altezza: 300px;
Contempo align: fine;
Background-color: verde;
imbottitura: 10px;
La proprietà align-content avrà il seguente impatto quando il suo valore è impostato come "FINE":
L'output autentica il funzionamento della proprietà align-content.
Allo stesso modo, possiamo implementare il resto delle proprietà del contenitore della griglia per avvalersi delle diverse funzionalità a seconda del nostro desiderio e necessità.
Conclusione
Un contenitore a griglia è una scatola/contenitore che contiene elementi della griglia e può posizionare questi elementi all'interno delle righe e delle colonne. Per creare un contenitore a griglia, dobbiamo utilizzare la proprietà del display e impostare il suo valore come griglia in linea o griglia. Inoltre, una vasta gamma di proprietà della griglia è disponibile in CSS per progettare le pagine Web, come gli elementi giustificati-allinei, giustificati, contento align, allineamento, flow auricolare, griglia e così via. Questo articolo ha spiegato vari aspetti delle proprietà del contenitore della griglia e le ha implementate praticamente.