Генератор CSS Grid
Визуальный конструктор макета CSS Grid. Настройте столбцы, строки, отступы и выравнивание. Скопируйте сгенерированный код.
Настройки
Item Properties
Предпросмотр
Сгенерированный Код
О генераторе CSS Grid
Соберите раскладку CSS Grid визуально: задайте до двенадцати столбцов и строк, настройте отступы между строками и столбцами и впишите размеры дорожек вроде 1fr, 200px или auto. Нажмите на любую ячейку, чтобы растянуть её с явными начальными и конечными значениями grid-column и grid-row, — предпросмотр обновляется на ходу, а соответствующие CSS и HTML сразу готовы к копированию. Пресеты дают старт с распространённых макетов, включая holy grail, боковую панель, дашборд и сетку карточек. Всё отрисовывается локально в браузере.
Примеры использования
Как использовать
Начните с готовой раскладки — Holy Grail, «Боковая панель», «Дашборд», «Галерея», «Блог» или «Карточки» — либо соберите сетку с нуля.
В панели настроек перетаскивайте ползунки «Колонки» и «Строки» в диапазоне от 1 до 12, а «Отступ между колонками» и «Отступ между строками» — от 0 до 64px.
Отредактируйте поля размеров для каждой колонки и строки, заменив 1fr на значения вроде 250px, auto или minmax(200px, 1fr).
Кликните по цветному блоку в предпросмотре, чтобы выделить его, а затем задайте «Начало колонки», «Конец колонки», «Начало строки», «Конец строки» и подпись — так блок займёт несколько ячеек.
Настройте два выпадающих списка выравнивания для justify-items и align-items, выбрав stretch, start, center или end.
Заберите результат из блока «Готовый код»: кнопкой CSS, кнопкой HTML или «Копировать всё», чтобы получить разметку и стили сразу.
Советы профессионалов
- Вставляйте содержимое напрямую — Генератор CSS Grid распознаёт типичные форматы ввода и сам подбирает разумные настройки.
- Используйте горячие клавиши (Ctrl/Cmd+A — выделить всё, Ctrl/Cmd+C — скопировать), чтобы работать в Генераторе CSS Grid быстрее.
- Очень большие данные разбивайте на части: вкладка браузера справится и с мегабайтами текста, но разбор огромной нагрузки может ненадолго подвесить интерфейс.
- Генератор CSS Grid не ведёт журналов и не сохраняет введённые данные. Если нужна история, копируйте важные результаты в локальный файл или в приложение для заметок.
- Сочетайте Генератор CSS Grid с другими инструментами сайта (форматировщиками, конвертерами, кодировщиками), чтобы выстраивать полные цепочки обработки данных, не выходя из браузера.
Часто задаваемые вопросы
Да, полностью бесплатно: без регистрации, без ключей API, без водяных знаков и без ограничений на использование.
Нет. Генератор CSS Grid работает полностью на стороне клиента, в вашем браузере. Введённые данные никогда не попадают на наши серверы.
Жёсткого предела нет, но при объёме больше нескольких мегабайт возможны замедления — всё зависит от объёма памяти вашего устройства.
Да. Всё, что вы получаете с помощью Генератора CSS Grid, можно свободно использовать в любых личных и коммерческих проектах.
Основная логика выполняется в браузере на JavaScript, поэтому после первой загрузки страницы вы обычно можете продолжать работу без подключения к сети.
Никаких. Генератор CSS Grid работает в вашем браузере, поэтому вы можете обработать столько данных, сколько позволит ваше устройство, — без ключей API и без ограничения скорости.