Il modello di layout della griglia CSS ci consente di creare un layout bidimensionale su un sito Web e allineare gli elementi della griglia in righe e colonne. Se confrontiamo il modello di layout della griglia CSS con i modelli di layout precedente, di conseguenza, sapremo sapere che il comportamento bidiere del modello di griglia CSS ha completamente cambiato il modo di progettare le interfacce utente. Il modello di layout della griglia CSS consente di progettare le pagine Web senza utilizzare i galleggianti, il posizionamento, i blocchi, ecc.

In questo articolo, tratteremo tutte le basi del modello di layout della griglia CSS e sarà organizzato come segue:

• Cos'è il modello di layout della griglia CSS?
• Differenza tra griglie CSS e CSS Flexbox.
• Cos'è un contenitore a griglia?
• Quali sono gli articoli della griglia?
• Implementazione pratica del layout della griglia CSS.

Quindi, iniziamo!

Cos'è il modello di layout della griglia CSS

È un modello di layout a base di griglia bidimensionale con righe e colonne. Queste righe e colonne possono contenere elementi della griglia.

Qual è la differenza tra il modello Grid e Flexbox

Ora, devi chiederti sia CSS Flexbox che CSS Grid sono modelli di layout, quindi qual è la differenza tra i due modelli di layout?

La tabella seguente ti aiuterà a comprendere i fondamenti di questo concetto:

Layout della griglia CSS	CSS Flexbox
È un modello di layout bidimensionale.	È un modello di layout unidimensionale.
Il layout della griglia può funzionare su righe e colonne contemporaneamente.	Flexbox può funzionare su righe o colonne contemporaneamente.
Aiuta a creare layout più complicati e organizzati.	Aiuta a progettare e creare pagine Web reattive.
Le griglie CSS sono più adatte per i layout su larga scala.	I layout CSS Flexbox sono più adatti per i layout su scala ridotta.
Primo approccio di layout.	Primo approccio di contenuto.

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. Per creare un contenitore a griglia, dobbiamo utilizzare la proprietà del display e impostare il suo valore come griglia in linea o griglia.

La tabella seguente fornirà una breve guida per le proprietà del contenitore della griglia:

Proprietà	Descrizione
Schermo	Determina un elemento come una griglia specificando il suo valore alla griglia in linea o alla griglia.
colonne a griglia-timPlate-colonne e righe a griglia	Determina 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. tracce, nome di linea.
areas a griglia	Determina come mostrare righe e colonne utilizzando gli elementi della griglia denominati.
Grid-Template	È una proprietà stenorta 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	Specificare la dimensione del gap tra diverse colonne e righe della griglia.
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 entrambe queste proprietà 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	Proprietà stenografia per righe a griglia, a griglia-aste, colonne a griglia-temperatura, griglia-auto-colonne, aree a griglia e aree a griglia e flusso di griglia-flusso.

Implementazione pratica del layout della griglia CSS

Ora, implementiamo praticamente un paio di proprietà sopra descritte:

Esempio 1

In primo luogo, implementeremo la proprietà Grid e imposteremo il suo valore come "griglia". Successivamente, utilizzeremo la proprietà della griglia-template-colonne e imposteremo il valore "auto" per tutte e tre le colonne:

Modello di layout della griglia

Primo elemento
Secondo articolo
Terzo elemento
Quarto articolo
Quinto elemento
Sesto elemento

Otterremo il seguente output per lo snippet di codice sopra indicato:

Esempio 2

Ora implementiamo anche la proprietà della griglia-tele-rows per specificare la dimensione della riga:

Grid-Template-Rows: Auto 150px;

Lo snippet sopra mostra che la dimensione della prima riga è "auto" E la dimensione della seconda riga è "150px". L'output risultante sembrerà così:

Possiamo osservare lo spazio nella parte inferiore della seconda riga, il che convalida il funzionamento della proprietà.

Quali sono gli articoli della griglia?

Gli elementi/articoli presenti all'interno del contenitore a griglia CSS sono noti come elementi della griglia o elementi figlio.

La tabella indicata di seguito illustra diverse proprietà degli elementi della griglia:

Proprietà	Descrizione
Grid-Column-Start & Grid-Row-Start	Queste proprietà determinano la posizione degli elementi della griglia specificando dove avviare l'articolo.
Grid-Column-End e Grid-Row-end	Queste proprietà determinano la posizione degli elementi della griglia specificando dove terminare l'elemento della griglia.
colonna griglia	È una proprietà stentata per le proprietà della griglia-colonna e della griglia-colonna.
ROW GRID	È una proprietà stenografica per due proprietà i.e. griglia-row-start e grid-row-end.
area della griglia	Specifica il nome dell'elemento della griglia o può essere utilizzato per ottenere le funzionalità di più proprietà i.e. Grid-Row-Start, Grid-Column-Start, Grid-Row-End e Grid-Column-End.
Giustifica-sé	Allinea un elemento della griglia all'interno di una cella lungo l'asse di riga/in linea.
allinearsi	Allinea un elemento della griglia all'interno di una cella lungo l'asse della colonna/blocco.
luogo-sé	È una proprietà stenografica per due proprietà i.e. allineare e giustificare-sé.

Esempio 3

In questo esempio, utilizzeremo la proprietà di allinea "Classe di articolo", Quindi, tutto il codice sarà lo stesso specificato negli esempi precedenti e l'unica differenza si verificherà nella classe elemento come mostrato di seguito:

.Classe di articolo
Background-color: Skyblue;
Bordo: 2px Black solido;
imbottitura: 30px;
Font-size: 30px;
Testo-align: centro;
allineare: Flex-end;

Imposiamo il valore della proprietà allinea-sé come end flex, che allineerà le linee alla fine del contenitore:

Questo è il modo in cui possiamo utilizzare qualsiasi contenitore a griglia o proprietà dell'articolo della griglia in base al nostro scenario.

Conclusione

Il modello di layout della griglia CSS ci consente di creare un layout bidimensionale su un sito Web e allineare gli elementi della griglia in righe e colonne. Il comportamento bidimensionale del modello di layout della griglia ci consente di lavorare contemporaneamente su righe e colonne. Il modello di layout della griglia CSS può avere un elemento genitore e più elementi figlio. L'elemento genitore è chiamato contenitore a griglia e l'elemento figlio è chiamato elemento della griglia. Numerose proprietà possono essere utilizzate per funzionare con modelli di layout della griglia, come display, griglia, se stesso, giustificare oggetti, ecc