Калькулятор CSS-сетки: колонки, контейнер и gap

Калькулятор CSS-сетки помогает определить ширину колонок, контейнера и промежутков между элементами. Он также рассчитывает, сколько колонок заданного размера помещается в контейнер, учитывает внутренние отступы и создаёт готовый CSS Grid-код.

Что умеет калькулятор

• рассчитывать ширину каждой колонки;
• определять необходимую ширину контейнера;
• находить размер промежутка между колонками;
• определять максимальное количество колонок;
• учитывать padding с левой и правой стороны;
• создавать готовое правило grid-template-columns;
• показывать визуальную схему сетки.

Как пользоваться калькулятором CSS Grid

1. Выберите параметр, который требуется найти.
2. Введите известные размеры контейнера, колонок и промежутков.
3. При необходимости укажите внутренние отступы контейнера.
4. Нажмите «Рассчитать сетку».
5. Проверьте схему и скопируйте готовый CSS-код.

Расчёт ширины колонки

Из общей ширины контейнера сначала вычитаются внутренние отступы и сумма всех промежутков. Оставшееся пространство делится на количество колонок:

ширина колонки =
(контейнер − 2 × padding − gap × (колонки − 1)) / колонки

Например, контейнер шириной 1200 px содержит четыре колонки, промежутки по 24 px и внутренние отступы по 36 px. Внутренняя ширина составляет 1128 px, все промежутки занимают 72 px, поэтому каждая колонка имеет ширину 264 px.

Расчёт ширины контейнера

Если известны ширина колонок, их количество, gap и padding, необходимый контейнер рассчитывается сложением всех частей:

контейнер =
колонка × количество + gap × (количество − 1) + 2 × padding

Этот режим полезен при проектировании макета по готовой карточке или модулю фиксированной ширины.

Расчёт промежутка между колонками

Чтобы найти одинаковый gap, из внутренней ширины контейнера вычитается суммарная ширина колонок. Остаток делится на количество промежутков:

gap =
(контейнер − 2 × padding − колонка × количество) / (количество − 1)

Между четырьмя колонками находится три промежутка. Поэтому в формуле всегда используется количество колонок минус один.

Сколько колонок помещается в контейнер

Максимальное целое количество колонок заданной ширины можно определить по формуле:

колонки = floor((внутренняя ширина + gap) / (ширина колонки + gap))

Результат округляется вниз, поскольку неполная колонка не считается. Если требуется, чтобы карточки растягивались и занимали остаток, в CSS можно использовать дробную единицу fr.

Что такое gap в CSS Grid

Свойство gap задаёт расстояние между строками и колонками сетки. Оно не добавляет пространство по краям контейнера. Для внешних краёв используются padding контейнера или margin самого блока.

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

Зачем использовать minmax(0, 1fr)

Запись minmax(0, 1fr) разрешает колонке сжиматься до нуля и предотвращает переполнение из-за длинного содержимого. В большинстве прикладных сеток она надёжнее простого 1fr. При этом содержимому всё равно может потребоваться min-width: 0 или перенос длинных слов.

Фиксированные и гибкие колонки

Фиксированная сетка использует точные размеры в пикселях:

grid-template-columns: repeat(4, 264px);

Гибкая сетка равномерно распределяет доступную ширину:

grid-template-columns: repeat(4, minmax(0, 1fr));

Калькулятор показывает фактическую ширину одинаковых колонок, но генерирует гибкий вариант. Он лучше реагирует на изменение ширины родительского блока.

Адаптивная сетка с auto-fit

Если количество колонок должно автоматически меняться, можно указать минимальную ширину карточки:

grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

Браузер разместит столько колонок, сколько помещается в контейнере, и растянет их для заполнения свободного места. Такой вариант удобен для каталогов и списков карточек.

Контейнер и box-sizing

При глобальном правиле box-sizing: border-box указанный max-width включает padding. Именно эта модель используется в расчётах калькулятора. Если проект использует content-box, фактическая внешняя ширина блока будет больше на сумму внутренних отступов.

Популярные варианты сеток

• 2 колонки — основной контент и боковая панель;
• 3–4 колонки — карточки товаров, статей или услуг;
• 6 колонок — компактные каталоги и панели;
• 12 колонок — универсальная дизайнерская система для сложных макетов.

Частые ошибки

• количество промежутков принимается равным количеству колонок;
• padding не вычитается из доступной ширины;
• сумма колонок и gap превышает ширину контейнера;
• фиксированная сетка не перестраивается на мобильных устройствах;
• длинный текст или изображение расширяет колонку;
• не учитывается модель box-sizing.

Ответы на частые вопросы

Сколько промежутков у четырёх колонок?

Три. Промежуток расположен только между соседними колонками.

Нужно ли добавлять gap по краям?

Нет. За пространство по краям отвечает padding контейнера. Свойство gap действует только между элементами сетки.

Можно ли использовать дробные размеры?

Да. Калькулятор поддерживает дробные значения ширины, padding и gap. Количество колонок должно оставаться целым.

Как сделать сетку адаптивной?

Используйте медиазапросы для изменения количества колонок либо конструкцию repeat(auto-fit, minmax(...)).