Мрежа се може дефинисати као скуп вертикалних и хоризонталних линија који се секу. Изглед ЦСС мреже раздваја страницу на главне одељке. Својство Грид нуди систем распореда заснован на мрежи који има редове и колоне. Олакшава дизајнирање веб страница без позиционирања и плутања. Распоред мреже нам даје начин да креирамо структуре мреже приказане у ЦСС-у, а не у ХТМЛ-у.

Слично табели, омогућава кориснику да поравна елементе у редове и колоне. Али у поређењу са табелама, лако је дизајнирати изглед помоћу ЦСС мреже. Колоне и редове на мрежи можемо дефинисати коришћењем грид-темплате-ровс и грид-темплате-колумнс својства.

Мрежни контејнер се може креирати декларисањем приказ: мрежа или приказ: инлине-грид на елементу. Мрежни контејнер садржи ставке мреже које су смештене унутар редова и колона.

Грид в/с Флекбок

Уобичајено је питање које се генерално поставља како се мрежа разликује од флексбокса. Мрежа је за дводимензионалне распореде (редови и колоне у исто време), док се флексбокс користи за једнодимензионалне распореде (било у реду или колони). Флекбок се користи када било шта треба да буде у правој линији.

Флекбок се користи за распоређивање елемената у једној колони или у једном реду. Са друге стране, мрежа је најбоље да распореди елементе у више колона и редова.

Хајде да разумемо мрежу у ЦСС-у користећи пример.

Пример

 .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 

Излаз