Сітку можна визначити як пересічний набір вертикальних і горизонтальних ліній. Макет CSS Grid розділяє сторінку на основні розділи. Властивість Grid пропонує систему макета на основі сітки, що містить рядки та стовпці. Це полегшує розробку веб-сторінок без позиціонування та переміщення. Макет сітки дає нам можливість створювати структури сітки, зображені в CSS, а не в HTML.

Подібно до таблиці, він дозволяє користувачеві вирівнювати елементи в рядки та стовпці. Але порівняно з таблицями за допомогою сітки CSS легко створити макет. Ми можемо визначити стовпці та рядки сітки за допомогою grid-template-rows і сітка-шаблон-стовпці властивості.

Грід-контейнер можна створити, оголосивши дисплей: сітка або дисплей: вбудована сітка на елементі. Контейнер сітки містить елементи сітки, які розміщені всередині рядків і стовпців.

мережа та види мереж

Grid v/s Flexbox

Зазвичай виникає питання про те, чим сітка відрізняється від flexbox. Сітка призначена для двовимірних макетів (одночасно рядків і стовпців), тоді як flexbox використовується для одновимірних макетів (у рядку або стовпці). Flexbox використовується, коли щось має бути на прямій лінії.

об'єкт для json у java

Flexbox використовується для розташування елементів в одному стовпці або в одному рядку. З іншого боку, сітка найкраще розташовує елементи в кількох стовпцях і рядках.

Розберемося з сіткою в CSS на прикладі.

приклад

 .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 

Вихід