Генератор CSS Grid
Ошибка: Применять результат вне описанной области.
Решение: Создайте CSS Grid с равными столбцами и адаптируйте код к странице.
Архив · Бесплатно
Генератор CSS Grid
Создайте предпросмотр сетки и CSS из числа столбцов, строк и отступов.
Этот инструмент находится в архиве. Перед использованием проверьте методику и данные с датой.
01Введите значения
Работает в браузереРаботает в браузере без интернета. После загрузки страницы и необходимых файлов для обработки интернет не нужен.
02Генератор CSS Grid
Работает в браузере
Как это работает
Создайте предпросмотр сетки и CSS из числа столбцов, строк и отступов.
Работает в браузере
Данные остаются у вас
Данные обрабатываются на этой странице и не отправляются на сервер.
Об инструменте
Открыть инструмент ↑Создайте предпросмотр сетки и 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 с равными столбцами и адаптируйте код к странице.
Генератор CSS Grid
- Столбцы
- 3
- Строки
- 2
- Интервал
- 16 px
Результат
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;
Частые вопросы
Как понимать результат?
Создайте CSS Grid с равными столбцами и адаптируйте код к странице.
Куда уходят мои данные?
Расчёты выполняются на устройстве. Данные формы не отправляются на сервер.
Термины и пояснения
Введите значения
- Столбцы
Введите целое число, без дробей.
Минимум: 1 · Максимум: 12
- Строки
Введите целое число, без дробей.
Минимум: 1 · Максимум: 12
- Интервал
Введите числовое значение величины. Используйте единицу рядом с полем. px
Минимум: 0 · Максимум: 100 px
Результат
- Результат
Создайте CSS Grid с равными столбцами и адаптируйте код к странице.
Рассчитывается по вашим данным методом ниже.
Частые ошибки и решения
Ограничения и допущения
- Создайте CSS Grid с равными столбцами и адаптируйте код к странице.
- Результаты могут округляться; это не повышает точность измерения.