Генератор CSS-сетки (Grid)

Задайте количество колонок, строк и отступов — и мгновенно получите соответствующий CSS Grid-код с живым предпросмотром.

Пример:

Как это работает

CSS Grid позволяет задавать двумерную сетку одним свойством, в отличие от Flexbox, который работает только с одной осью за раз. Этот инструмент генерирует grid-template-columns и grid-template-rows с колонками и строками одинаковой ширины (1fr) — удобно для галереи изображений или панели управления в один клик.

Что означает «1fr» в сгенерированном коде?

Единица fr (доля) распределяет доступное пространство поровну между колонками или строками; значит, repeat(3, 1fr) создаёт три колонки одинаковой ширины, занимающие всё пространство контейнера.

Можно ли сделать колонки разного размера?

Да, инструмент создаёт простую отправную точку с равными колонками; затем вы можете вручную отредактировать grid-template-columns, чтобы использовать фиксированные или разнообразные значения, например 200px 1fr 2fr.

Обработка 100% локально: код генерируется полностью в вашем браузере через WebAssembly.