Container a griglia in CSS | Spiegato

Una griglia CSS è considerata come un modello di layout che si divide una pagina web in varie righe e colonne per disporre elementi. Queste righe e colonne aiutano ad allineare facilmente gli elementi anziché usare le proprietà di posizione e galleggiante. Una griglia posiziona elementi rispetto alla pagina web o ad altri elementi presenti nella pagina web. È costituito da vari componenti come contenitori a griglia e articoli a griglia. Tuttavia, discuteremo del contenitore della griglia in questo post.

Cos'è un contenitore a griglia

Un contenitore a griglia è un elemento genitore che contiene elementi della griglia posizionati all'interno delle righe e colonne. Ai fini di creare un elemento adottare il comportamento di un contenitore a griglia, impostare la proprietà del display su griglia o griglia in linea.

Puoi fare in modo che un contenitore a griglia si comportasse in un certo modo utilizzando le proprietà CSS associate ad esso. Queste proprietà sono discusse di seguito.

Proprietà del contenitore a griglia

Le proprietà collegate a un contenitore a griglia sono descritte in dettaglio di seguito.

Proprietà a griglia-template-colonne

Un contenitore a griglia è diviso in più colonne con dimensioni particolari, pertanto, per indicare il numero di colonne e le loro larghezze, viene utilizzata la proprietà della griglia-template-colonne.

Sintassi

colonne a griglia-template: nessuna | auto | massimo contento | Min-Content | lunghezza | iniziale | ereditare;

Parametri spiegati
nessuno: È un valore predefinito che genera colonne quando richiesto.

auto: Questo valore valuta la larghezza delle colonne in base alla dimensione del contenitore e alla dimensione del contenuto degli elementi presenti all'interno di una colonna.

massimo contenuto: Regola la larghezza della colonna in base all'elemento più grande nella colonna.

Min-Content: Regola la larghezza della colonna in base all'articolo più piccolo nella colonna.

lunghezza: Questo valore imposta il valore dato come larghezza delle colonne.

Esempio
Supponiamo di voler creare quattro colonne ciascuna con una lunghezza specificata, quindi seguire il codice seguente.

Html

1
2
3
4
5
6
7
8

Ai fini di creare un sistema a griglia abbiamo creato un elemento Div con gli "elementi del contenitore" di classe che funge da contenitore a griglia, nel frattempo, gli altri elementi Div nidificati al suo interno sono elementi della griglia.

CSS

.Container
display: griglia;
colonne a griglia-template: 50px auto 70px auto;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Qui abbiamo creato quattro colonne ciascuna con la larghezza specificata nel codice sopra e con un divario di 5px ciascuno. Nel frattempo, al Div è stato assegnato un colore marrone sabbioso e un'imbottitura di 10px.

CSS

.elementi> div
Background-color: bisque;
imbottitura: 20px;
Testo-align: centro;
Font-size: 35px;

Ora stiamo semplicemente accumulando i nostri articoli della griglia usando le proprietà CSS.

Produzione

La proprietà funziona correttamente.

Proprietà a griglia-timlate-rows

Un sistema a griglia è inoltre costituito da determinate righe, pertanto, per specificare il numero di righe insieme alla loro altezza, viene utilizzata la proprietà della rete a griglia.

Sintassi

GRID-TEMPLATE ROWS: Nessuno | auto | massimo contento | Min-Content | lunghezza | iniziale | ereditare;

Parametri spiegati
nessuno: È un valore predefinito che genera righe quando richiesto.

auto: Questo valore valuta l'altezza delle righe in base alla dimensione del contenitore e alla dimensione del contenuto degli elementi presenti all'interno di una riga.

massimo contenuto: Regola l'altezza della riga in base all'articolo più grande della riga.

Min-Content: Regola l'altezza della riga in base all'elemento più piccolo nella riga.

lunghezza: Questo valore imposta il valore dato come altezza delle righe.

Esempio
Qui dimostreremo come creare righe con una certa altezza.

Html

.Container
display: griglia;
colonne a griglia-template: auto automatica automatica;
Grid-Template-Rows: 200px 100px;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Qui stiamo creando due righe ciascuna con l'altezza specificata nel codice sopra. Abbiamo anche creato quattro colonne ciascuna con una larghezza automatica.

Produzione

Le righe sono state generate con successo.

Proprietà giustificata

Ai fini dell'allineamento dell'intera griglia all'interno di un contenitore in orizzontale, viene utilizzata la proprietà giustificata. Ricorda che, affinché questa proprietà funzioni la larghezza totale della griglia dovrebbe essere inferiore a quella del contenitore.

Sintassi

Giustify-Content: inizia | fine | Centro | Spazio-mezzo | Space-around | Spazio-unita | allungamento | iniziale | ereditare;

Parametri spiegati
Inizio: posiziona la griglia all'inizio del contenitore ed è il valore predefinito.

FINE: Questo posiziona la griglia all'ultimo contenitore.

centro: Questo posiziona la griglia al centro del contenitore.

spaziale: Aggiunge una quantità uguale di spazio tra le colonne.

Spazio-around: Aggiunge uno spazio uguale attorno alle colonne.

Spazio-unitamente: Questo aggiunge uno spazio uguale intorno e tra le colonne.

stirata: Altera le dimensioni degli articoli che consentono alla griglia di coprire l'intera larghezza del contenitore.

Esempio
Supponiamo di voler aggiungere spazio tra le colonne all'interno di un contenitore a griglia.

CSS

.Container
display: griglia;
Giustify-Content: spazio-spazio;
colonne a griglia-template: 40px 40px 40px;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Nel codice sopra, al fine di rendere la griglia più piccola del contenitore stiamo realizzando tre colonne di 40px ciascuna e per aggiungere spazio tra queste colonne stiamo usando il valore spaziale tra la proprietà giustificata.

Produzione

Lo spazio è stato aggiunto tra le colonne.

proprietà align-content

Al fine di allineare l'intera griglia all'interno di un contenitore in verticale, viene utilizzata la proprietà align-content. Ricorda che, affinché questa proprietà funzioni, l'altezza totale della griglia dovrebbe essere inferiore a quella del contenitore.

Sintassi

Contento align: avvia | fine | Centro | Spazio-mezzo | Space-around | Spazio-unita | allungamento | iniziale | ereditare;

Parametri spiegati
inizio: Posiziona le righe all'inizio del contenitore ed è il valore predefinito.

FINE: Questo posiziona le righe alla fine del contenitore.

centro: Questo posiziona la griglia al centro del contenitore.

spaziale: Aggiunge una quantità uguale di spazio tra le righe.

Spazio-around: Aggiunge uno spazio uguale attorno alle file.

Spazio-unitamente: Questo aggiunge uno spazio uguale intorno e tra le righe.

stirata: Altera le dimensioni degli articoli che consentono alla griglia di coprire l'intera altezza del contenitore.

Esempio
Supponiamo di voler aggiungere spazio tra le righe all'interno di un contenitore.

CSS

.Container
display: griglia;
Altezza: 350px;
Contempo align: spazio-spazio;
colonne a griglia-template: auto automatica;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Per aggiungere spazio tra le righe, stiamo prima di tutto fornendo un po 'di altezza alla griglia e quindi usando il valore di mezzo della proprietà del contenuto di allineamento, stiamo aggiungendo spazio tra le righe. Inoltre, abbiamo creato tre colonne ciascuna con una larghezza automatica.

Produzione

Lo spazio è stato aggiunto tra le righe.

Conclusione

Un contenitore a griglia è un elemento genitore che contiene elementi della griglia posizionati all'interno delle righe e colonne. Allo scopo di fare un elemento adottare il comportamento di un contenitore a griglia che lo visualizza come griglia o griglia in linea. Un contenitore a griglia può raggiungere determinate caratteristiche attraverso l'uso di alcune proprietà CSS associate ad esso come giustificare contento, colonne a griglia-template, contenuto di allinea. Ognuna di queste proprietà è stata spiegata nell'articolo insieme a esempi pertinenti.