CSS Grid Generator
Grid налаштування
Template
Відступи
Вирівнювання
Status
Idle
Live preview
1
2
3
4
5
6
7
8
Про CSS Grid Generator
Цей інструмент допомагає створювати CSS Grid layouts без ручного написання кожної властивості. Можна змінювати колонки, рядки, відступи й вирівнювання та одразу бачити результат у preview.
Корисно для card grids, галерей, dashboard-блоків, sidebar layouts і швидких layout-експериментів перед перенесенням CSS у проєкт.
Як користуватись
- Обери preset або введи власні grid-template-columns і grid-template-rows.
- Налаштуй gap, column gap, row gap і вирівнювання.
- Подивись live preview, щоб перевірити поведінку grid.
- Скопіюй згенерований CSS або повне .grid правило.
Поради
- Використовуй repeat(3, 1fr) для рівних колонок.
- Використовуй minmax(0, 1fr), якщо елементи можуть мати довгий контент.
- Для layout із сайдбаром зручно писати щось типу 220px 1fr.
- justify-content і align-content впливають на сам grid, коли він менший за контейнер.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.
CSS Flexbox Generator
Створюй CSS flexbox-розкладки з live preview, налаштуванням вирівнювання, напрямку, переносу, gap і готовим CSS для копіювання.
Інші інструменти
›
CSS генератор фонових патернів
Створюйте CSS-фони з крапками, сіткою, смугами, діагональними лініями та шаховим патерном.
Інші інструменти
›
CSS Border Generator
Створюйте CSS border зі зміною товщини, стилю, кольору та радіуса.
Інші інструменти
›
CSS Gradient Generator
Генеруйте, парсьте та переглядайте CSS linear і radial gradients онлайн. Безкоштовний генератор градієнтів для розробників і дизайнерів.
Інші інструменти
›
CSS Grid Generator FAQ
Що робить grid-template-columns?
Визначає колонки grid, наприклад repeat(3, 1fr), 220px 1fr або repeat(4, minmax(0, 1fr)).
У чому різниця між gap і column-gap?
gap задає відступи між рядками й колонками, а column-gap змінює тільки горизонтальний відступ між колонками.
Можна вставити існуючий grid CSS?
Так. Встав CSS правила і натисни Parse, щоб завантажити їх у контролери.
Це тільки для простих grid layouts?
Найкраще підходить для типових layouts, але можна вручну вводити і складніші grid track значення.