Articoli a griglia in CSS | Spiegato

La griglia è un modello di layout CSS che consente ai suoi utenti di organizzare elementi che appaiono su un sito Web in varie righe e colonne. Questo modello in sostanza si sposta una pagina web in sezioni e allinea elementi senza l'uso di posizione e proprietà galleggianti. Ha due componenti, un contenitore e articoli. Tuttavia, in questo post, sottolineeremo cos'è un elemento della griglia e le varie proprietà ad esso associate.

Cos'è un elemento della griglia

Un oggetto a griglia è un elemento figlio presente all'interno di un contenitore a griglia. All'interno di un contenitore per impostazione predefinita, è presente un elemento presente per ogni colonna, in ogni riga. Tuttavia, è possibile attraversare elementi della griglia su numerose file e colonne.

Esistono numerose proprietà associate a un elemento della griglia che definisce le sue caratteristiche. Abbiamo spiegato queste proprietà di seguito.

Proprietà dell'articolo della griglia

Le proprietà collegate a un elemento della griglia sono spiegate in dettaglio di seguito.

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
Supponiamo di voler posizionare un elemento specifico nella prima riga del contenitore qui è come viene fatto.

Html

1
2
3
4
5
6

Per generare un contenitore a griglia abbiamo creato un elemento div con "oggetti contenitori" di classe e per posizionare determinati elementi della griglia all'interno di quel contenitore abbiamo nidificato sei elementi div all'interno del contenitore della griglia Div con una classe diversa ciascuno con una classe diversa.

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 di tutto assegnando il display di una griglia più grande per renderlo un contenitore a griglia quindi stiamo specificando che ci sono tre colonne nella griglia che hanno una larghezza di 200px e ha un divario di 5px. Il contenitore ha anche ricevuto un po 'di colore e imbottitura. Infine, stiamo affermando che il terzo elemento verrà visualizzato all'inizio della riga 1.

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

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 in quale colonna l'articolo inizierà a mostrare.

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

CSS

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

.uno
Grid-Column-Start: 2;

Nel codice sopra, abbiamo realizzato quattro colonne ciascuna con una larghezza di 200 px e quindi usando la proprietà della colonna di colonna griglia stiamo 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
Facciamo un articolo su 2 file.

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

.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'elemento terminerà la visualizzazione.

Esempio
Facciamo 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à a griglia

Ai fini della definizione della posizione e delle dimensioni di un elemento della griglia, viene utilizzata la proprietà della fila della griglia. Inoltre, è una proprietà stenorta per le proprietà menzionate di seguito.

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 terminerà.

Esempio
Considera l'esempio di seguito.

CSS

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

.due
ROW GRID: 1 / Span 2;

Nel codice sopra abbiamo affermato che l'articolo 2 verrà inserito nella riga 1 e sarà interrotto 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 terminerà.

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à 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: 2/1 / span 2 / span 3;

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

Produzione

La proprietà è stata implementata con successo.

Conclusione

Un oggetto a griglia è un elemento figlio presente all'interno di un contenitore a griglia. All'interno di un contenitore per impostazione predefinita, è presente un elemento presente per ogni colonna, in ogni riga. Per assegnare caratteristiche diverse a un elemento a griglia ci sono numerose proprietà ad essa associate come regata, colonna griglia, area della griglia, ecc. Questa guida ti insegna cos'è un elemento della griglia e come puoi fare in modo che questi elementi si comportano in un certo modo utilizzando le proprietà correlate insieme a esempi appropriati.