Una griglia può essere definita come un insieme di linee verticali e orizzontali che si intersecano. Il layout della griglia CSS separa una pagina in sezioni principali. La proprietà Grid offre un sistema di layout basato su griglia con righe e colonne. Semplifica la progettazione di pagine Web senza posizionamento e fluttuazione. Il layout della griglia ci dà un modo per creare strutture a griglia rappresentate in CSS, non in HTML.

Simile alla tabella, consente all'utente di allineare gli elementi in righe e colonne. Ma rispetto alle tabelle, è facile progettare il layout con la griglia CSS. Possiamo definire colonne e righe sulla griglia utilizzando righe-modello-griglia E colonne-modello-griglia proprietà.

È possibile creare un contenitore di griglia dichiarando il file visualizzazione: griglia O visualizzazione: griglia in linea su un elemento. Il contenitore della griglia contiene gli elementi di una griglia posizionati all'interno delle righe e delle colonne.

pulire la cache npm

Griglia contro Flexbox

Una domanda comune che generalmente sorge è come la griglia sia diversa dal flexbox. La griglia è per layout bidimensionali (righe e colonne contemporaneamente), mentre la flexbox viene utilizzata per layout unidimensionali (in riga o colonna). Flexbox viene utilizzato quando qualsiasi cosa deve essere in linea retta.

zeri intorpiditi

Flexbox viene utilizzato per disporre gli elementi in un'unica colonna o in un'unica riga. D'altra parte, la griglia è migliore per disporre gli elementi in più colonne e righe.

Comprendiamo la griglia nei CSS usando un esempio.

Esempio

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Produzione