ŠTO JE TO UOPĆE CSS GRID?
CSS Grid Layout (skraćeno “Grid”), je dvodimenzionalno sučelje/layout zasnovano na sistemu ”mreže”/grida koje cilja na ništa drugo doli do toga da u cijelosti promijeni način na koji dizajniramo naša Web sučelja.
CSS je oduvijek bio korišten za stvaranje Web stranica, no nije uvijek obavljao dovoljno dobar posao. Isprva smo koristili tablice, zatim float, pozicioniranje i inline blokove, no sve te metode su u biti bile varke i zaobilaznice koje su izostavljale razne važne dijelove funkcionalnosti Web stranica (poput vertikalnog centriranja na primjer).
Iako je Flexbox bio od koristi, bio je namijenjen jednodimenzionalnim sučeljima a ne dvodimenzionalnima (iako unatoč tomu, Flexbox i Grid rade poprilično dobro zajedno).
Grid je prvi CSS modul kreiran specifično za rješavanje problema sučelja koja smo zaobilazili raznim trikovima i varkama otkako izrađujemo Web stranice uopće.
Kako bismo započeli rad sa CSS Gridom, moramo definirati element “kontejnera” kao grid uz pomoć “display: grid”-a, postaviti veličinu stupca i reda sa “grid-template-columns” i “grid-template-rows”, a zatim staviti njegove “child” elemente u grid sa “grid-columns” i “grid-row”. Slično kao i kod Flexbox-a, redoslijed source elemenata grid-a nije važan. CSS ih može smjestiti bilo kojim redoslijedom te je grid jednostavno urediti sa “@media query” upitima. Zamislite da definirate izgled cijele stranice, a zatim je u potpunosti prerasporedite kako bi se prilagodila drugoj širini zaslona sa samo nekoliko redaka CSS-a.
Grid je zaista jedan od najmoćnijih CSS modula današnjice koji možemo koristiti.
Izvor i više informacija na ovome linku.
