Cos'è la griglia CSS?

Assegnare posizioni appropriate agli elementi è molto significativo quando si progetta un sito Web. Ci sono varie proprietà e layout disponibili in CSS che aiutano a eseguire questo compito. Uno di questi layout è il modulo Grid CSS che organizza elementi in righe e colonne. Il focus di questo articolo è sottolineare cosa sia questo layout e come può essere usato.

Iniziamo.

Cos'è la griglia CSS

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 gli elementi senza dover affrontare il problema di usare il posizionamento e il galleggiante.

Una griglia posiziona elementi rispetto alla pagina web o ad altri elementi presenti nella pagina web. Di seguito abbiamo mostrato una rappresentazione visiva di un layout della griglia CSS.

Un modello di layout della griglia funziona con tutti gli ultimi browser. È costituito da due componenti che sono contenitore a griglia E Articoli a griglia. Di seguito li abbiamo spiegati in dettaglio.

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 in linea.

Articoli a 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.

Ecco una rappresentazione grafica del contenitore della griglia e degli elementi della griglia.

Come già accennato, una griglia CSS divide una pagina web in righe e colonne per organizzare elementi. Queste righe e colonne insieme ad altre importanti terminologie della griglia sono spiegate di seguito.

Colonne in una griglia

Le linee verticali in una griglia all'interno della quale vengono posizionati gli oggetti sono considerate colonne in una griglia. Un sistema a griglia può avere almeno due e al massimo dodici o più colonne.

Righe in una griglia

Le linee orizzontali in una griglia all'interno della quale vengono posizionati gli oggetti sono considerate righe in una griglia. Un sistema a griglia può avere numerose file.

Lava in una griglia

L'area tra ogni riga e la colonna è indicata come lacune.

Linee in una griglia

Le linee tra ogni riga sono indicate come linee di riga, mentre le linee tra ciascuna colonna vengono definite linee di colonne.

Ci sono molte proprietà collegate alla griglia CSS. Consulta la sezione successiva per conoscerli.

Proprietà della griglia

La tabella seguente fornisce una panoramica delle proprietà del layout della griglia.

Proprietà	Descrizione
colonne a griglia	Questa proprietà indica il numero e la dimensione delle colonne in un layout della griglia.
ROWS GRID-TEMPLATE	Descrive la dimensione delle righe in un sistema a griglia.
areas a griglia	Questa proprietà assegna nomi a vari elementi in una griglia.
Grid-auto-colonne	Imposta la dimensione iniziale di una colonna.
Grid-auto-rows	Questa proprietà imposta la dimensione iniziale di una riga.
flow grid-auto	Dichiara come gli articoli che sono automatici sono posizionati in un sistema a griglia.
griglia-row-start	Questa proprietà afferma dove iniziare un articolo in una griglia.
Grid-Column-Start	Svolge la stessa funzione della proprietà sopra.
regata a griglia
Grid-Column-end	Svolge la stessa funzione della proprietà sopra.
area della griglia	Questa proprietà viene utilizzata per nominare un'area della griglia specifica.
gap a fila	Questa proprietà afferma un divario tra le righe.
colonna-gap	Afferma il divario tra le colonne.

Comprendiamo ulteriormente il sistema della griglia con l'aiuto di un esempio.

Esempio

Nell'esempio dimostrato di seguito abbiamo creato un semplice layout della griglia. Lo schizzo della griglia è mostrato di seguito.

Iniziamo la codifica.

Html

UN
B
C
D

Qui abbiamo semplicemente nidificato quattro contenitori di Div all'interno di un contenitore di div più grande. A ciascuno dell'elemento Div è stata assegnata una classe.

CSS

.Container
display: griglia;
GRID-GAP: 5px;
colonne a griglia-template: 120px 120px 120px;

Usando il "contenitore" di classe assegnato al div più grande, lo stiamo visualizzando come una griglia. Inoltre, assegnato un divario di 5px tra righe e colonne. Infine, abbiamo creato tre colonne con una dimensione di 120px ciascuna utilizzando la proprietà della griglia-template-colonne.

CSS

.articolo
Background-color: SandyBrown;
colore bianco;
raggio di confine: 6px;
imbottitura: 25px;
Font-size: 20px;

Ora stiamo semplicemente accumulando gli oggetti presenti all'interno del contenitore della griglia usando alcune proprietà CSS di base.

CSS

.uno
Grid-Column: 1/3; / * Specifica la posizione e la dimensione dell'articolo all'interno di una colonna */
ROW GRID: 1; / * Specifica la posizione e la dimensione dell'articolo in una riga */

La proprietà Grid-Column Imposta la posizione di avvio e finale dell'elemento della griglia in una colonna, nel frattempo, la proprietà della regata definisce la posizione di un elemento in una riga. Ad esempio, nello snippet del codice sopra, l'articolo 1 inizierà a visualizzare nella colonna 1 e all'estremità nella colonna 3, mentre verrà visualizzato nella riga 1.

CSS

.due
Grid-Column: 3;
ROW GRID: 1/3;

.tre
Grid-Column: 1;
ROW GRID: 2;

.quattro
Grid-Column: 2;
ROW GRID: 2;

Usando la colonna a griglia e le proprietà della rete a griglia sono anche specificate le posizioni del resto degli articoli.

Produzione

È stato generato un semplice layout della griglia.

Conclusione

Un modello di layout della griglia 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 rispetto alla pagina web o ad altri elementi presenti nella pagina web. È costituito da vari elementi che sono un contenitore a griglia e elementi della griglia. Un contenitore a griglia è l'elemento genitore, mentre gli elementi della griglia sono elementi per bambini. Questo articolo discute tutti i dettagli necessari del layout della griglia insieme a rappresentazioni grafiche e un esempio appropriato.