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

Сетки, созданные с помощью 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:

<section>
  <img src="//placekitten.com/404/303">
  <img src="//placekitten.com/404/303">
  <img src="//placekitten.com/404/303">
  <img src="//placekitten.com/404/303">
  <img src="//placekitten.com/404/303">
  <img src="//placekitten.com/404/303">
  <img src="//placekitten.com/404/303">
</section>

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

img {
  float: left;
  width: calc(25% - 20px);
  margin: 10px;
}

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

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

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

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

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

img {
  float: left;
  margin: 10px;
  width: calc(100% * 1 / 4 - 20px);
}
@media (max-width: 900px) {
  img {
    width: calc(100% * 1 / 3 - 20px);
  }
}
@media (max-width: 600px) {
  img {
    width: calc(100% * 1 / 2 - 20px);
  }
}
@media (max-width: 400px) {
  img {
    width: calc(100% - 20px);
  }
}

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

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

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

Автор: Cory Simmons

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

Комментарии Facebook:

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

  1. Iryna

    Действительно мощный CSS инструмент)
    Спасибо за статью.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree