Генератор модульной CSS сетки
Создайте адаптивную сетку колонок со своими контрольными точками, колонками, отступами, полями и максимальной шириной. Экспорт в CSS, утилитарные классы или конфигурацию Tailwind.
Загрузка: Генератор CSS сетки…
Ваши файлы не покидают устройство
Как пользоваться: Генератор CSS сетки
- 1
Откройте «Генератор CSS сетки» на этой странице. Инструмент загружается прямо в браузере.
- 2
Добавьте файл, текст или значения и настройте параметры.
- 3
Скопируйте или скачайте результат. Ничего не загружается и не хранится.
Об инструменте
Модульная сетка задаёт всем страницам одну основу: фиксированное число колонок, одинаковые отступы и максимальную ширину контента, которые подстраиваются под каждый размер экрана. Этот генератор сетки позволяет один раз описать эту структуру и экспортировать готовый код, чтобы дизайнеры и разработчики работали по одной сетке.
Как создать сетку
- Задайте максимальную ширину контента в пикселях.
- Настройте контрольные точки: для каждого размера экрана выберите число колонок, отступ между ними и внешнее поле.
- Проверьте живой предпросмотр колонок.
- Выберите префикс классов, если экспортируете классы.
- Скопируйте код как обычный CSS, утилитарные классы или конфигурацию Tailwind.
Типичная настройка
| Экран | Колонки | Отступ |
|---|---|---|
| Телефон | 4 | 16px |
| Планшет | 8 | 24px |
| Компьютер | 12 | от 24 до 32px |
Двенадцать колонок популярны, потому что они ровно делятся на половины, трети, четверти и шестые части.
Советы
- Совпадайте с макетом: используйте те же колонки и отступы, что и в сетке макета Figma.
- Ограничьте длину строки: максимальная ширина примерно от 1200 до 1440px сохраняет читаемость текста на больших экранах.
- Используйте шкалу отступов: отступы и поля 8, 16, 24 или 32px дают единообразные интервалы.
- Пусть контрольные точки определяет контент: добавляйте точку там, где раскладка начинает ломаться, а не только по размерам устройств.
Модульная сетка или CSS grid?
Модульная сетка это договорённость в дизайне, а CSS grid это возможность браузера, которая может её реализовать. Сгенерированный CSS использует современный CSS и не требует фреймворков. Для одномерных раскладок внутри сетки используйте генератор Flexbox, а размеры текста задайте в генераторе типографской шкалы.
Частые вопросы
Сколько колонок должно быть в сетке?
Двенадцать колонок на компьютере самый частый выбор, потому что они делятся на половины, трети и четверти. На телефонах обычно 4 колонки, на планшетах 8.
Что такое отступ между колонками?
Промежуток между колонками (gutter). Обычно это 16px на телефонах и от 24 до 32px на больших экранах.
Можно ли экспортировать сетку для Tailwind?
Да. Выберите формат Tailwind, чтобы получить конфигурацию экранов и отступов.
Можно ли задать свои контрольные точки?
Да. Для каждой точки можно изменить ширину, число колонок, отступ и поле.
Какую максимальную ширину выбрать?
Для большинства сайтов подходит примерно от 1200 до 1440 пикселей: строки текста остаются удобной длины на широких экранах.
Нужен ли для кода Bootstrap или другой фреймворк?
Нет. Сгенерированный CSS и классы это чистый CSS, который работает самостоятельно.