Що таке CSS Grid?
CSS Grid Layout — це двовимірна система верстки, вбудована в сучасні браузери. Ви визначаєте контейнер сітки за допомогою display: grid, потім керуєте стовпцями через grid-template-columns і рядками через grid-template-rows. Дробові одиниці (fr) пропорційно розподіляють доступний простір. Дочірні елементи можуть охоплювати кілька стовпців або рядків за допомогою grid-column: span N і grid-row: span N.
Як користуватися Генератором CSS Grid
-
Задайте кількість стовпців і рядків за допомогою числових полів (1–12 для кожного).
-
Налаштуйте grid-template-columns та grid-template-rows для керування розмірами (напр. 1fr 2fr, 200px auto).
-
Задайте відступ між комірками (напр. 10px, 1rem).
-
Натисніть на будь-яку комірку в попередньому перегляді для її вибору (стає помаранчевою).
-
Задайте col-span та row-span у панелі Охоплення комірки, потім натисніть Застосувати. Комірки з охопленням стають зеленими.
-
Натисніть на вкладку CSS або HTML для перемикання формату виводу, потім Копіювати в буфер обміну.
-
Натисніть Скинути все, щоб розпочати з нової сітки 3×3.