Калькулятор модульной сетки (колонки, межколонник, сетка 8pt)
Введите ширину экрана или страницы, число колонок, межколонник и поля, чтобы получить точную ширину колонок с предпросмотром на сетке 8pt. Работает в px и мм
Загрузка инструмента…
Введите общую ширину, число колонок, межколонник и боковые поля, чтобы получить ширину одной колонки и любого ряда колонок. Подходит для 12-колоночной веб-сетки и для разметки печатной страницы в миллиметрах.
Как пользоваться
- Выберите px или мм в поле «Единица», затем «Готовая ширина» или введите «Общая ширина».
- Введите «Колонки», «Межколонник» и «Поле». Если поля разные, переключите «Боковые поля» на «Левое и правое отдельно».
- Посмотрите «Ширина колонки» и таблицу «Ширина нескольких колонок» и проверьте по бейджу, попадает ли значение в сетку, выбранную в «Шаг сетки». Если нет, попробуйте общую ширину из подсказки.
- Включите «Сравнить три брейкпоинта», чтобы увидеть три ширины сразу, и нажмите «Скопировать CSS», чтобы забрать код.
Как это работает
- Ширина колонки = (общая ширина − левое поле − правое поле − межколонник × (колонки − 1)) ÷ колонки. Ширина n колонок = ширина колонки × n + межколонник × (n − 1).
- С «Максимальная ширина контента» при большей общей ширине контент остаётся этой ширины, а остаток делится между полями.
- В режиме мм шаг сетки задаётся в пунктах: 1 pt = 0,3528 мм, а 1 мм = 3,78 px при 96 dpi.
- Введённые значения хранятся в браузере этого устройства.
Частые вопросы
- Какова ширина колонки в сетке 1200 px на 12 колонок?
- При межколоннике 24 px и без полей: (1200 − 24 × 11) ÷ 12 = 78 px. При межколоннике 32 px — 70,67 px.
- Что делать, если ширина колонки не попадает в сетку 8 px?
- Подсказка называет ближайшее кратное и общую ширину для него: колонка 78 px становится 80 px при ширине контента 1224 px. Небольшое изменение межколонника или полей тоже помогает.
- Сколько колонок должно быть на странице A4?
- Единого ответа нет. Для текста подходят две или три; шесть или двенадцать упрощают сочетание фото и таблиц. Введите A4 210 мм, поля 15 мм и межколонник 4 мм, чтобы сравнить.
- Как использовать скопированный CSS?
- .container задаёт ширину контента и боковые отступы; .grid задаёт колонки и промежуток. Элемент на несколько колонок получает grid-column: span 4. В режиме мм фрагмент содержит и поля @page для печати.