Калькулятор ширины колонки сетки
Калькулятор ширины колонки сетки
Введите общую ширину контейнера или страницы, на сколько колонок её разделить и ширину промежутка (зазора) между колонками. Это рассчитает точную ширину каждой отдельной колонки, полезно как для печатных макетов сетки, так и для CSS grid/flexbox веб-дизайна.
- Формула: Ширина колонки = (Общая ширина − Ширина промежутка × (Колонки − 1)) ÷ Количество колонок.
- Распространённые веб-сетки: 12-колоночные сетки — самая распространённая конвенция макета (равномерно делится на 2, 3, 4 и 6), хотя 16-колоночные сетки также распространены.
- Подходит и для печати: та же математика применяется для расположения колонок текста или изображений на печатной странице или плакате.
Какую ширину промежутка использовать для веб-макета?
16–24px — распространённое значение для большинства веб-сеток; печатные макеты часто используют пропорционально похожий промежуток относительно размера страницы.
Почему 12 колонок, а не 10?
12 делится на 2, 3, 4 и 6, что значительно упрощает создание макетов с 2, 3, 4 или 6 равными секциями — 10 делится ровно только на 2 и 5.
Калькулятор ширины колонки сетки
Введите общую ширину контейнера или страницы, на сколько колонок её разделить и ширину промежутка (зазора) между колонками. Это рассчитает точную ширину каждой отдельной колонки, полезно как для печатных макетов сетки, так и для CSS grid/flexbox веб-дизайна.
- Формула: Ширина колонки = (Общая ширина − Ширина промежутка × (Колонки − 1)) ÷ Количество колонок.
- Распространённые веб-сетки: 12-колоночные сетки — самая распространённая конвенция макета (равномерно делится на 2, 3, 4 и 6), хотя 16-колоночные сетки также распространены.
- Подходит и для печати: та же математика применяется для расположения колонок текста или изображений на печатной странице или плакате.
Какую ширину промежутка использовать для веб-макета?
16–24px — распространённое значение для большинства веб-сеток; печатные макеты часто используют пропорционально похожий промежуток относительно размера страницы.
Почему 12 колонок, а не 10?
12 делится на 2, 3, 4 и 6, что значительно упрощает создание макетов с 2, 3, 4 или 6 равными секциями — 10 делится ровно только на 2 и 5.