Rešetka se može definirati kao skup okomitih i vodoravnih linija koji se sijeku. CSS Grid raspored dijeli stranicu na glavne dijelove. Svojstvo mreže nudi sustav rasporeda temeljen na mreži koji ima retke i stupce. Olakšava dizajniranje web stranica bez pozicioniranja i lebdenja. Raspored rešetke daje nam način za stvaranje mrežnih struktura prikazanih u CSS-u, a ne u HTML-u.

Slično tablici, korisniku omogućuje poravnavanje elemenata u retke i stupce. Ali u usporedbi s tablicama, lako je dizajnirati izgled pomoću CSS mreže. Možemo definirati stupce i retke na mreži pomoću grid-template-rows i rešetka-predložak-stupci Svojstva.

Mrežni spremnik može se stvoriti deklariranjem prikaz: rešetka ili prikaz: inline-grid na elementu. Spremnik rešetke sadrži stavke mreže koje su smještene unutar redaka i stupaca.

Grid protiv Flexboxa

Uobičajeno je pitanje koje se općenito postavlja kako se grid razlikuje od flexboxa. Mreža je za dvodimenzionalne rasporede (istodobno redove i stupce), dok se flexbox koristi za jednodimenzionalne rasporede (bilo u retku ili stupcu). Flexbox se koristi kada nešto treba biti u ravnoj liniji.

Flexbox se koristi za raspoređivanje elemenata u jedan stupac ili u jedan red. S druge strane, rešetka je najbolja za raspoređivanje elemenata u više stupaca i redaka.

Razmotrimo rešetku u CSS-u koristeći primjer.

Primjer

 .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 

Izlaz