Що таке CSS Grid Layout?
CSS Grid Layout - це двовимірна система компонування, яка дозволяє створювати сітки і вирівнювати елементи за рядками та стовпцями одночасно. На відміну від Flexbox (який працює в одній осі: або рядок, або колонка), Grid спочатку розрахований на повноцінні сіткові макети.
Ключові особливості Grid
- двовимірність: керування і рядками, і стовпцями
- явна сітка: можна заздалегідь задати структуру (колонки, рядки, проміжки)
- точне позиціонування: елементи можна розміщувати за координатами (
grid-row,grid-column) - адаптивність: підтримка фракцій (
fr), автообчислень і автоматичного заповнення сітки
Базовий приклад:
css
.container {
display: grid;
grid-template-columns: 200px 1fr 1fr; /* 3 колонки */
grid-template-rows: auto auto; /* 2 рядки */
gap: 20px;
}Grid використовують для побудови повноцінних макетів сторінок, карток, галерей, структурних сіток, тоді як Flexbox зручніший для лінійного розташування елементів усередині блоків.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.