Mrežo lahko definiramo kot sekajoči niz navpičnih in vodoravnih črt. Mrežna postavitev CSS loči stran na glavne razdelke. Lastnost mreže ponuja mrežni sistem postavitve z vrsticami in stolpci. Omogoča preprosto oblikovanje spletnih strani brez pozicioniranja in lebdenja. Mrežna postavitev nam omogoča ustvarjanje mrežnih struktur, prikazanih v CSS, ne v HTML.

Podobno kot tabela uporabniku omogoča poravnavo elementov v vrstice in stolpce. Toda v primerjavi s tabelami je preprosto oblikovati postavitev z mrežo CSS. Stolpce in vrstice na mreži lahko definiramo z uporabo grid-template-rows in mreža-predloga-stolpci lastnosti.

Mrežni vsebnik lahko ustvarite tako, da deklarirate prikaz: mreža oz prikaz: inline-grid na elementu. Vsebnik mreže vsebuje elemente mreže, ki so nameščeni znotraj vrstic in stolpcev.

Mreža proti Flexboxu

Pogosto vprašanje, ki se na splošno pojavi, je, kako se mreža razlikuje od flexboxa. Mreža je za dvodimenzionalne postavitve (hkratne vrstice in stolpce), medtem ko se flexbox uporablja za enodimenzionalne postavitve (bodisi v vrstici ali stolpcu). Flexbox se uporablja, ko mora biti karkoli v ravni črti.

Flexbox se uporablja za urejanje elementov v enem stolpcu ali v eni vrstici. Po drugi strani pa je mreža najboljša za razporeditev elementov v več stolpcih in vrsticah.

Razumejmo mrežo v CSS na primeru.

Primer

 .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 

Izhod