Дизайн · Бесплатно

Генератор CSS Grid

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

01Введите значения

Работает в браузере

—

Работает в браузере

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

Работает в браузере

Данные обрабатываются на этой странице и не отправляются на сервер.

Об инструменте

Создайте CSS Grid с равными столбцами и адаптируйте код к странице.

Введите значения
Столбцы · Строки · Интервал
Рассчитать / создать
Создайте предпросмотр сетки и CSS из числа столбцов, строк и отступов.
Результат
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Создайте CSS Grid с равными столбцами и адаптируйте код к странице.

Пример

Результат

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Как понимать результат?

Создайте CSS Grid с равными столбцами и адаптируйте код к странице.

Куда уходят мои данные?

Расчёты выполняются на устройстве. Данные формы не отправляются на сервер.