Proprietà della griglia CSS | Spiegato

CSS Grid è un modello di layout che consente una semplice disposizione di elementi che appaiono su un sito Web in varie righe e colonne. Questo modello funziona partizionando una pagina web in sezioni e allinea gli elementi senza dover affrontare il problema di usare il posizionamento e il galleggiante. Per usare questo modello sono disponibili numerose proprietà CSS che abbiamo spiegato in modo approfondito in questo post.

Proprietà della griglia CSS

Le proprietà associate al modulo di layout della griglia sono spiegate di seguito.

Proprietà a griglia-template-colonne

Come sappiamo che un layout della griglia è costituito da numerose colonne che hanno una certa dimensione, 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 imposta il valore dato come larghezza delle colonne.

Esempio
Supponiamo di voler creare quattro colonne ciascuna con una lunghezza specificata nel codice. Ecco come lo fai.

Html

1
2
3
4
5
6
7
8

Nel codice sopra, per creare un contenitore a griglia abbiamo creato un elemento div con "elementi del contenitore" di classe e per posizionare determinati elementi della griglia all'interno di quel contenitore abbiamo nidificato otto elementi div all'interno del contenitore della griglia div.

CSS

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

Qui stiamo impostando il display dell'elemento Div con il "contenitore" di classe in griglia per renderlo un contenitore a griglia. Quindi stiamo realizzando quattro colonne con le prime tre colonne con una lunghezza di 70px, mentre la larghezza dell'ultima colonna è impostata su auto. Ogni colonna ha uno spazio di 5px e un colore SandyBrown. Infine, l'imbottitura del contenitore è impostata su 10px.

CSS

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

Ora usando alcune proprietà CSS di base stiamo accontentando i nostri articoli presenti all'interno del contenitore.

Produzione

Sono state create quattro colonne che hanno una certa larghezza.

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 imposta il valore dato come altezza delle righe.

Esempio
Supponiamo di voler creare due righe con un'altezza specificata, quindi seguire il codice seguente.

Html

.Container
display: griglia;
colonne a griglia-template: auto automatica automatica;
ROWS GRID-TEMPLATE: 150px 250px;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Nel codice sopra, abbiamo generato due righe. La prima riga ha un'altezza di 150 px, nel frattempo, la seconda ha un'altezza di 250px. A parte questo, abbiamo anche creato quattro colonne, ognuna con una larghezza automatica con un divario di 5px.

Produzione

Sono state create due righe che hanno un'altezza specificata.

Proprietà della griglia-template-aeas

Ai fini di specificare il nome delle aree in un sistema a griglia, viene utilizzata la proprietà a bordo craspato-areas. Funziona in modo da dover nominare l'area usando la proprietà dell'area della griglia e quindi fare riferimento a quel nome in questa proprietà.

Sintassi

Grid-Template-Areas: Nessuno | Nome dell'elemento;

Parametri spiegati
nessuno: È un valore predefinito che non specifica alcun nome per l'area della griglia.

Nome dell'elemento: Questo valore rappresenta una sequenza di come verranno visualizzate righe e colonne in una griglia.

Esempio
Ecco come funziona questa proprietà.

CSS

.uno
Grid-Area: ItemA;

.Container
display: griglia;
Grid-Template-Areas: 'ItemA item…';
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Nel codice sopra, utilizzando la proprietà dell'area della griglia stiamo assegnando il primo elemento della griglia un nome "iteA" e successivamente facendo riferimento a questo nome nella proprietà Grid-Template-Areas che specifica che il primo elemento ha il nome "ItemA" e occuperà spazio di due colonne su cinque.

Produzione

La proprietà funziona correttamente.

Proprietà a griglia

È una proprietà stenografica per le proprietà menzionate di seguito.

1. colonne a griglia
2. ROWS GRID-TEMPLATE
3. areas a griglia

Sintassi

Grid-Template: Nessuno | Grid-Template-Rows/Grid-Template-Column | Grid-Template-Areas | iniziale | ereditare;

Parametri spiegati
nessuno: È un valore predefinito che non specifica alcuna dimensione di righe e colonne.

colonne a griglia: Afferma la dimensione delle colonne.

ROWS GRID-TEMPLATE: Definisce la dimensione delle righe.

areas a griglia: Afferma i nomi delle aree della griglia.

Esempio
Assediamo il numero e la dimensione di righe e colonne tutte in una volta.

CSS

.Container
display: griglia;
Grid-Template: 200px/ Auto Auto Auto;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Nel codice sopra, è stato specificato che ci sono due righe con la riga 1 con un'altezza di 200px e tre colonne con larghezza automatica per ciascuna colonna.

Produzione

La proprietà è stata implementata con successo ..

Proprietà a griglia

Come suggerisce il nome, questa proprietà afferma in cui la riga dell'elemento della griglia inizierà a visualizzare.

Sintassi

GRID-ROW-Start: Auto | riga;

Parametri spiegati
auto: Questo è un valore predefinito che posiziona gli elementi in base al flusso della griglia.

riga: Afferma su quale riga l'articolo inizierà a mostrare.

Esempio
Considera l'esempio seguente per comprendere il funzionamento di questa proprietà.

CSS

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

.tre
griglia-row-start: 1;

Nel codice sopra, stiamo prima specificando tre colonne ciascuna con larghezza di 200px e quindi affermando che il terzo elemento inizierà a visualizzare nella riga 1.

Produzione

L'articolo 3 è stato posto all'inizio della riga 1.

Proprietà a griglia-colonna

Per specificare in quale colonna inizierà l'elemento della griglia, viene utilizzata la proprietà Grid-Column-Start.

Sintassi

Grid-Column-Start: Auto | span-n | Linea di colonna;

Parametri spiegati
auto: Questo è un valore predefinito che posiziona gli elementi in base al flusso della griglia.

span-n: Afferma il numero di colonne che l'articolo deve estendersi.

Linea della colonna: Definisce su quale colonna l'articolo inizierà a mostrare.

Esempio
Supponiamo di voler posizionare un elemento a griglia specifico su una colonna specifica.

CSS

.uno
Grid-Column-Start: 2;

Qui stiamo utilizzando la proprietà di avvio della colonna a griglia e posizionando l'elemento 1 nella colonna 2.

Produzione

L'articolo 1 è stato inserito correttamente nella colonna 2.

Proprietà a griglia

Questa proprietà afferma che la riga dell'elemento della griglia termina la visualizzazione o il numero di righe un elemento della griglia si estenderà.

Sintassi

GRID-ROW-END: Auto | span-n | riga;

Parametri spiegati
auto: Questo è un valore predefinito che rende un elemento che si estende solo.

span-n: Afferma il numero di righe che l'articolo deve estendersi.

riga: Definisce su quale riga l'articolo terminerà.

Esempio
Consultare l'esempio di seguito.

.uno
GRID-ROW-End: Span 2;

Nel codice sopra, stiamo realizzando l'articolo 1 su 2 righe utilizzando la proprietà della rete a griglia.

Produzione

L'oggetto è stato attraversato con successo su due file.

Proprietà a griglia-colonna

Questa proprietà afferma su cui colonna l'elemento della griglia terminerà la visualizzazione o le colonne numeriche un elemento della griglia.

Sintassi

Grid-Column-end: Auto | span-n | Linea di colonna;

Parametri spiegati
auto: Questo è un valore predefinito che rende un elemento che attraversa una sola colonna.

span-n: Afferma il numero di colonne che l'articolo deve estendersi.

Linea della colonna: Definisce su quale colonna l'articolo finirà per visualizzare.

Esempio
Qui stiamo facendo un elemento su due colonne.

CSS

.uno
Grid-Column-end: Span 2;

Il codice sopra indica che l'articolo 1 si estende su due colonne.

Produzione

L'articolo 1 si estende su due colonne.

Proprietà dell'area a griglia

Questa proprietà viene utilizzata per definire la posizione e le dimensioni di un elemento della griglia o dare un certo nome a un elemento della griglia che viene quindi indicato dalla proprietà aree-areas a griglia. Inoltre, è una proprietà abbreviata per le proprietà menzionate di seguito.

1. griglia-row-start
2. regata a griglia
3. Grid-Column-Start
4. Grid-Column-end

Sintassi

Grid-Area: Row-Start / Column-Start / Row-End / Column-End | Nome dell'elemento;

Parametri spiegati
griglia-row-start: Questo valore afferma dove iniziare a visualizzare un elemento di riga.

Grid-Column-Start: Afferma dove iniziare a visualizzare un elemento in una colonna.

regata a griglia: Descrive dove smettere di mostrare gli oggetti di fila o quante righe estendono.

Grid-Column-end: Descrive dove smettere di mostrare gli elementi in una colonna o quante colonne si estendono.

Nome dell'elemento: Questo valore afferma il nome dell'elemento griglia.

Esempio
Per comprendere il funzionamento di questa proprietà considera il seguente esempio.

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

.Sette
Area della griglia: 1/2 / span 3 / span 2;

Il codice sopra indica che ci sono quattro colonne ciascuna con una larghezza automatica. Nel frattempo, il settimo elemento nella griglia verrà posizionato nella prima riga e la seconda colonna e sparno 3 file e 2 colonne.

Produzione

La proprietà è stata implementata con successo.

Proprietà Grid-Auto-Columns

Questa proprietà fornisce una certa dimensione alle colonne di un layout della griglia.

Sintassi

Grid-auto-colonne: auto | massimo contento | Min-Content | lunghezza;

Parametri spiegati
auto: Questo valore predefinito valuta la dimensione delle colonne in base alla dimensione del contenitore.

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

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

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

Esempio
Considera l'esempio di seguito.

CSS

.uno
Area della griglia: 1/1/2 / 2;

Prima di utilizzare questa proprietà devi prima assegnare posizioni a ciascuno degli elementi della griglia utilizzando la proprietà dell'area della griglia. Ad esempio nel codice sopra, abbiamo specificato che la voce 1 verrà posizionata all'inizio della riga 1 e della colonna 1 e alla fine della riga 2 e della colonna 2. Ora le posizioni del resto degli elementi sono assegnate in uno schema simile.

CSS

.due
Area della griglia: 1/2/2/3;

.tre
Area della griglia: 1/3/2/4;

.quattro
Area della griglia: 2/1/3/2;

.cinque
Area della griglia: 2/2/3/3;

.sei
Area della griglia: 2/3/3/4;

Al resto degli elementi della griglia viene anche assegnata una posizione utilizzando la proprietà dell'area della griglia.

CSS

.Container
display: griglia;
Grid-Auto-Colonns: 200px;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Ora usando la proprietà in discussione, la dimensione delle colonne è impostata su 200px.

Produzione

La proprietà è stata implementata.

Proprietà Grid-Auto-Rows

Questa proprietà fornisce una certa dimensione alle file di un layout della griglia.

Sintassi

GRID-AUTO-ROWS: Auto | massimo contento | Min-Content | lunghezza;

Parametri spiegati
auto: Questo valore predefinito valuta la dimensione delle righe in base alla dimensione del contenitore.

massimo contenuto: Regola la dimensione della riga in base all'elemento più grande della riga.

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

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

Esempio
Diamo una certa dimensione alle righe nel contenitore usando la proprietà in discussione.

CSS

.One Grid-Area: 1 /1 /2 /2;
.due area della griglia: 1 /2 /2 /3;
.tre area della griglia: 1 /3 /2 /4;
.quattro Grid-Area: 2/1/3 / 2;
.cinque Grid-Area: 2/2/3/3;
.Six Grid-Area: 2/3/3/4;
.Container
display: griglia;
GRID-AUTO-ROWS: 200px;
GRID-GAP: 5px;
Background-color: SandyBrown;
imbottitura: 10px;

Proprio come la proprietà Grid-Auto-Columns dobbiamo prima assegnare posizioni agli elementi della griglia usando la proprietà dell'area della griglia e quindi usando la proprietà Grid-auto-Rows La dimensione delle righe è stata impostata su 200px.

Produzione

A ogni riga è stata assegnata una dimensione correttamente.

Proprietà Grid-auto-flow

Questa proprietà gestisce il modo in cui gli elementi della griglia posizionati automaticamente verranno posizionati all'interno del contenitore.

Sintassi

GRID-Auto-Flow: riga | colonna | denso | riga densa | colonna densa;

Parametri spiegati
riga: Questo valore predefinito posiziona gli elementi che riempiono tutte le righe.

colonna: Questo valori posiziona elementi che riempiono tutte le colonne.

denso: Questo valore riempie gli spazi nella griglia posizionando gli articoli in quegli spazi.

riga densa: Mette gli oggetti che riempiono tutte le righe che non lasciano buchi nella griglia.

colonna densa: Posiziona gli articoli che riempiono tutte le colonne che non lasciano buchi nella griglia.

Esempio
Supponiamo di voler posizionare i tuoi elementi della griglia che riempie ogni colonna.

CSS

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

Nel codice sopra, prima di tutto abbiamo creato quattro colonne ciascuna con una larghezza automatica, quindi abbiamo generato due righe ciascuna con altezza automatica. Successivamente, stiamo usando la proprietà a flusso di flusso griglia per posizionare gli elementi che riempiono ogni colonna.

Produzione

La proprietà funziona correttamente.

Proprietà a griglia

Ai fini della definizione della posizione e delle dimensioni di un elemento della griglia, viene utilizzata la proprietà della rete. Inoltre, è una proprietà stensa per le seguenti proprietà.

1. griglia-row-start
2. regata a griglia

Sintassi

GRID-ROW: GRID-ROW-Start / Grid-Row-end;

Parametri spiegati
griglia-row-start: Afferma su quale riga l'articolo inizierà a mostrare.

regata a griglia: Definisce su quale riga l'articolo finirà per mostrare.

Esempio
Ecco un esempio di questa proprietà.

CSS

.due
ROW GRID: 1 / Span 2;

Nel codice sopra abbiamo affermato che l'articolo 2 verrà posizionato nella riga 1 e si estende su 2 righe. Nel frattempo, la griglia ha quattro colonne ciascuna con una larghezza automatica.

Produzione

La proprietà stenografia è stata implementata correttamente.

Proprietà a griglia

Al fine di descrivere la posizione e la larghezza di un elemento della griglia, viene utilizzata la proprietà della fila a griglia. Inoltre, è una proprietà stenorta per le proprietà elencate qui.

1. Grid-Column-Start
2. Grid-Column-end.

Sintassi

Grid-Column: Grid-Column-Start / Grid-Column-end;

Parametri spiegati
Grid-Column-Start: Afferma su quale colonna l'articolo inizierà a mostrare.

Grid-Column-end: Definisce su quale colonna l'articolo finirà per mostrare.

Esempio
Ecco un esempio di questa proprietà.

CSS

.uno
Grid-Column: 2 / Span 2;

Il codice sopra afferma che la voce 1 verrà inserita nella colonna 2 e si estenderà su 2 colonne.

Produzione

La proprietà funziona correttamente.

Proprietà a gap a righe

Come suggerisce il nome, la proprietà del gap di riga specifica il divario tra le righe della griglia.

Sintassi

ROW-GAP: lunghezza | normale | iniziale | ereditare;

Parametri spiegati
lunghezza: Afferma il divario tra le righe.

normale: Definisce un divario normale tra le righe ed è un valore predefinito.

Esempio
Consultare l'esempio di seguito per comprendere questa proprietà.

CSS

.Container
display: griglia;
colonne a griglia-template: auto automatica;
ROW-GAP: 60px;
Background-color: SandyBrown;
imbottitura: 10px;

Nel codice sopra, abbiamo specificato che il divario tra ogni riga sarà 60px.

CSS

.elementi> div
Background-color: bisque;
bordo: 1px nero solido;
imbottitura: 20px 0;
Testo-align: centro;
Font-size: 35px;

Questo codice è lo stesso di sopra con l'unica differenza che per dimostrare correttamente il concetto di divario tra le righe abbiamo aggiunto bordi agli elementi all'interno della griglia.

Produzione

Il divario tra le righe è stato implementato con successo.

Proprietà a colonna

Questa proprietà indica il divario tra le colonne della griglia.

Sintassi

colonna-gap: lunghezza | normale | iniziale | ereditare;

Parametri spiegati
lunghezza: Afferma il divario tra le colonne.

normale: Definisce un divario normale tra le colonne ed è un valore predefinito.

Esempio
Aggiungiamo un divario specificato tra le colonne all'interno di una griglia.

CSS

.Container
display: griglia;
colonne a griglia-template: auto automatica;
colonna-gap: 60px;
Background-color: SandyBrown;
imbottitura: 10px;

Qui abbiamo aggiunto un divario di 60px tra ogni colonna.

Produzione

È stato aggiunto il divario tra le colonne.

proprietà gap

Per specificare il divario tra righe e colonne tutte in una volta, viene utilizzata la proprietà Gap. È una proprietà stenografica per i seguenti.

1. gap a fila
2. colonna-gap

Sintassi

GAP: GAP ROW-GAP GAP;

Parametri spiegati
gap a fila: Aggiunge uno spazio tra le righe.

colonna-gap: Aggiunge uno spazio tra le colonne.

Esempio
Impostiamo un po 'di spazio tra righe e colonne tutte in una volta.

CSS

.Container
display: griglia;
colonne a griglia-template: auto automatica;
GAP: 65px;
Background-color: SandyBrown;
imbottitura: 10px;

Nel codice sopra, abbiamo specificato che ci sarà un divario di 65px tra ogni riga e ogni colonna.

Produzione

La proprietà funziona correttamente.

Conclusione

CSS Grid è un modello di layout che consente una semplice disposizione di elementi che appaiono su un sito Web in varie righe e colonne. Esistono numerose proprietà ad essa associate come, colonne a griglia-sumplate, righe a griglia, colonne a griglia, aree griglia, area della griglia, ecc. Ognuna di queste proprietà ha uno scopo diverso che abbiamo spiegato in questo post insieme a esempi pertinenti.