Генератор CSS Grid
Генератор CSS Grid будує сітки за кількістю стовпців і рядків, відступами, необов’язковими власними значеннями grid-template та вирівнюванням елементів, з живим переглядом і готовим CSS.
Про цей інструмент
Генератор CSS Grid будує сітки за кількістю стовпців і рядків, відступами, необов’язковими власними значеннями grid-template та вирівнюванням елементів, з живим переглядом і готовим CSS.
Як користуватися
- Задайте кількість стовпців і рядків.
- Налаштуйте відступи між стовпцями й рядками.
- За бажанням введіть власні шаблони, наприклад 200px 1fr 1fr.
- Виберіть justify-items і align-items, потім натисніть «Копіювати CSS».
Корисно знати
- Одиниця fr ділить вільний простір: 1fr 2fr робить другий стовпець удвічі ширшим за перший.
- repeat(3, 1fr) — скорочений запис трьох однакових стовпців.
- column-gap і row-gap задають проміжки між доріжками сітки.
- Grid двовимірний: він керує рядками й стовпцями одночасно.
- repeat(auto-fit, minmax(200px, 1fr)) створює адаптивну сітку без медіазапитів.
Працює повністю у вашому браузері — нічого з того, що ви вводите, не завантажується й не зберігається.
Поширені запитання
Як створити сітку з 3 стовпців у CSS?
Задайте контейнеру display: grid; grid-template-columns: repeat(3, 1fr); і додайте gap для відступів.
Що означає fr у CSS Grid?
fr — це частка доступного вільного простору в grid-контейнері.
CSS Grid чи Flexbox?
Grid найкраще підходить для двовимірних макетів, як-от структура сторінки чи сітки карток; Flexbox — для одновимірних рядків або стовпців.
Як зробити адаптивну сітку без медіазапитів?
Використайте grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); — стовпці автоматично переноситимуться залежно від доступного місця.