Сетки, созданные с помощью calc(), — лучшие сетки

От автора: Привет. Меня зовут Кори (Cory). У меня есть одна небольшая страсть. Я уже очень давно и серьезно увлекаюсь сеточными системами. По факту, я помог создать достаточно популярную сеточную систему под названием Jeet. Я всегда любил, когда математика используется для упорядочивания и расстановки вещей.

Я думаю, вы все согласитесь, что фиксированные сетки уже вымерли, как динозавры, а им на смену пришли «резиновые» сетки. Но при работе с «резиновыми» сетками у меня всегда возникали какие-нибудь баги или затруднения. Например, невозможно сделать так, чтобы отступ/промежуток (gutter) сверху и снизу был таким же, как и отступ слева и справа. Серьезно, попробуйте сами.

И невозможно также использовать неограниченную вложенность, не обозначив некоторого контекста при построении сетки. Например, в Jeet, вам нужно набрать column(1/3 1/2) , где 1/2 — это размер родительского контейнера. И это становится довольно неудобным моментом, когда вы используете вложенность три или четыре раза подряд и ваши объявления уже выглядят как-то вот так: column(1/4 1/3 1/2 1/2). Да уж! Но это не только проблема Jeet. Она есть в любой сеточной системе, основанной на препроцессорах.

А как же Bootstrap? Не заставляйте меня рассказывать, сколько лишних элементов вам придется добавить в вашу разметку, чтобы ваша сеточная система заработала — это не приведет ни к чему, кроме ошибок. Или взять тот факт, что вам потребуется еще больше элементов в разметке, чтобы задать фоновый цвет для элементов. Вот пример этой небольшой проблемы в виде галереи.

Обидно, что, похоже, даже Flexbox не может предложить ничего нового, кроме удобного способа отцентровки элементов по вертикали. После такой головокружительной экскурсии о том, что не так с сетками на данный момент, возникает вопрос: «А что должен делать тот, кто обожает использовать сетки?»

Подождите, а что это за отличная штука? Calc()?

Мы можем использовать функцию calc() в нашем CSS. Так что же она делает?

«С помощью функции calc() вы можете осуществлять вычисления для определения значений у CSS свойств». — MDN

И не только это. Используя calc(), мы также можем комбинировать единицы измерения. Это означает, что если нам нужно создать сетку, состоящую из четырех колонок, имеющих промежуток в 20px между ними, в каждой строке, то мы можем написать комбинацию процентных и пиксельных значений, например, width: calc(25% — 20px). Разве это не фантастика?

Пример. У нас есть следующая разметка – семь изображений с котятами внутри родительского элемента section:

Затем мы применяем стили к изображениям:

Это гарантирует нам то, что ширина каждого изображения будет занимать 25% от ширины родителя, за вычетом 20px для отступа слева и справа. Внешний отступ (margin) со значением 10px со всех сторон позволит нам расположить изображение точно по центру внутри «колонки».

Обратите внимание на то, что сверху и снизу расстояние между изображениями такое же, как и слева и справа. Заметили? Прекрасно.

Выраженное по-другому

Давайте еще больше абстрагируемся от этого примера, чтобы мы могли записать наши вычисления по-другому: width: calc(100% * 1/4 — 20px);

И снова мы получим четыре прекрасные колонки с отступом в 20px. Мы также можем использовать медиа-запросы для того, чтобы изменить количество колонок в зависимости от ширины области просмотра (viewport):

Годы страстного увлечения полностью стерлись из памяти благодаря этому небольшому прекрасному CSS правилу. Прощайте сеточные системы. Привет calc().

Браузерная поддержка

Было бы нечестно с моей стороны вот так просто завершить данную обучающую статью, не рассказав вам о том, когда и где вы можете использовать calc(). Привычные нам игроки в мире браузеров играют в «догонялки» (IE9 почти вырвался из рядов отстающих, но все же игнорирует calc(), когда используется display:table). Однако, с прицелом на будущее, это очень мощный CSS инструмент.

Автор: Cory Simmons

Источник: //webdesign.tutsplus.com/

Редакция: Команда webformyself.

Комментарии Вконтакте:

Комментарии (1)