Генератор CSS Grid

Собирайте макеты CSS Grid визуально и копируйте аккуратный CSS и HTML

Предпросмотр

Результат

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
  gap: 16px;
}

Параметры

Отступ между колонками16px

Отступ между строками16px

Выбранный элемент

Выберите элемент в предпросмотре, чтобы задать, сколько колонок и строк он занимает.

Элементы по горизонтали

Элементы по вертикали

Дополнительно

Треки по горизонтали

Треки по вертикали

Минимальная высота

0 оставляет min-height незаданным. Строкам в fr нужна высота, чтобы растянуться.

Предпросмотр и код обновляются во время редактирования.

Генератор CSS FlexboxСобирайте Flexbox-макеты визуально и копируйте CSS, HTML или Tailwind Генератор градиентовПодборка CSS-градиентов и редактор линейных, радиальных и конических градиентов CSS форматировщик & минификаторФорматируйте, оптимизируйте и минимизируйте CSS код Площадка HTML CSS JSПишите фронтенд-код, безопасно запускайте и отлаживайте его в браузере.

Что такое генератор CSS Grid?

Визуальный конструктор макетов CSS Grid. Задавайте размеры колонок и строк через fr, px, %, auto, minmax() или проверенное собственное значение, закрашивайте именованные области или стройте адаптивную сетку карточек с auto-fit. Предпросмотр — это настоящий контейнер CSS Grid с теми же объявлениями, что и в сгенерированном коде, поэтому вы копируете ровно то, что видите.

Как пользоваться

1.Выберите режим: «Треки», «Именованные области» или «Адаптивная», либо загрузите шаблон.
2.Задайте размеры колонок и строк, отступы и выравнивание.
3.В режиме «Треки» нажмите на элемент в предпросмотре, чтобы растянуть его на несколько колонок или строк.
4.В режиме «Именованные области» введите имя и нажимайте на ячейки, чтобы закрасить каждую область.
5.Скопируйте или скачайте CSS или самостоятельную HTML-страницу.

Именованные области и проверка

Каждая именованная область должна быть сплошным прямоугольником, иначе браузер проигнорирует всё объявление grid-template-areas. Инструмент объясняет, какая область нарушает правило, и сохраняет последний корректный макет в предпросмотре и коде, пока вы его не исправите. Собственные размеры треков проверяются до применения.

Ограничения

До 12 колонок, 12 строк и 48 элементов. Собственные размеры принимают длины, проценты, fr, auto, min-content, max-content, minmax() и fit-content(); calc(), var(), имена линий и repeat() внутри одного трека не поддерживаются. Макеты сохраняются только в этом браузере.

Генератор CSS Grid

Макет

Размеры колонок

Размеры строк

Предпросмотр

Результат

Параметры

Выбранный элемент

Генератор CSS Grid

Макет

Размеры колонок

Размеры строк

Предпросмотр

Результат

Параметры

Выбранный элемент

Связанные инструменты