Генератор CSS-сеток

Визуально определите столбцы, строки и пробелы, а затем скопируйте код шаблона CSS Grid для своего макета.

CSS Grid Generator

Live

Columns3

Rows3

Gap12px

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

Визуально определите столбцы, строки и пробелы, а затем скопируйте код шаблона CSS Grid.
Запускается в вашем браузере
Бесплатное использование

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

Установите количество столбцов и строк.
Настройте зазор и отследите размер.
Скопируйте CSS-сетку.

How this tool works

Установите количество столбцов и строк.
Настройте зазор и отследите размер.
Скопируйте CSS-сетку.

Recommended settings

Сначала используйте параметры по умолчанию, затем при необходимости измените их.

Supported formats

Text / on-page input

File size and limits

Очень сложные многослойные предварительные просмотры могут работать медленнее на старых телефонах.

Privacy

Генераторы цвета и CSS полностью работают в вашем браузере. Предварительный просмотр и преобразование никогда не загружают ваши стили.

Common use cases

Используйте CSS Grid Generator, когда вам нужно: визуально определите столбцы, строки и пробелы, а затем скопируйте код шаблона CSS Grid.

Troubleshooting

Предварительный просмотр выглядит по-другому после вставки

Проверьте наличие конкурирующих CSS на вашей странице (сбросы, унаследованные цвета). Сначала скопируйте сгенерированное правило в изолированную таблицу стилей.

FAQ

Это загружает мой CSS?

Нет. Генераторы и преобразователи запускаются в вашем браузере с предварительным просмотром в реальном времени.

Нужен ли мне аккаунт?

Нет. Откройте инструмент, настройте элементы управления и скопируйте CSS.