Генератор CSS Grid
Создайте код макета CSS Grid с настраиваемыми колонками, строками и отступами для быстрой верстки веб-страниц.
Запустить инструмент
Этот инструмент помогает разработчикам быстро создавать код для макетов на основе технологии CSS Grid. Вы можете задать количество колонок и строк, а также настроить общие и индивидуальные отступы между элементами сетки. По умолчанию система использует три колонки, автоматическое определение количества строк и стандартный отступ в десять пикселей. Если вы вводите числовые значения для колонок, генератор применяет функцию repeat с единицей измерения fr для гибкого распределения пространства. Для строк с числовыми значениями используется аналогичный подход с единицей auto. Текстовые значения, такие как конкретные размеры в пикселях или комбинации единиц, сохраняются в исходном виде без изменений. Отступы автоматически получают суффикс px, если значение отлично от нуля. Нулевые или пустые значения для отступов исключаются из итогового кода, что позволяет избежать лишних объявлений стилей. Результат включает свойство display grid и отдельные шаблоны для колонок и строк. Это решение подходит для прототипирования интерфейсов и изучения синтаксиса гридов.
Инструкция
- Введите желаемое количество колонок в поле Columns или укажите текстовое значение, например 200px 1fr.
- Задайте параметр Rows для определения структуры строк, оставьте auto для автоматического расчета.
- Укажите общий отступ Gap в пикселях или настройте Column Gap и Row Gap по отдельности.
- Нажмите кнопку запуска для генерации готового CSS кода.
- Скопируйте полученный код и вставьте его в таблицу стилей вашего проекта.
Примеры
- Ввод 3 в поле колонок создает запись repeat(3, 1fr) для равномерного распределения ширины.
- Установка значения 20 для общего отступа добавляет свойство gap: 20px в итоговый стиль.
Частые вопросы
Как работает ввод чисел для колонок?
Числовые значения преобразуются в функцию repeat с единицей 1fr для создания гибких колонок.
Что происходит с нулевыми отступами?
Если значение отступа равно нулю или пусто, соответствующее свойство не включается в код.
Можно ли использовать сложные значения для строк?
Да, текстовые значения сохраняются как есть, позволяя задавать точные размеры или комбинации единиц.
Какие значения используются по умолчанию?
Инструмент начинает работу с тремя колонками, автоматическими строками и отступом 10 пикселей.