web development

(Css) Calc() для сеток

Ознакомится с calc() можно здесь: http://htmlbook.ru/css/calc


Пример создания сетки с calc(): Здесь изображения семи котят содержащихся в <section>:

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

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

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

Это гарантирует, что каждое изображение-это ровно 25% ширины своего
родителя, минус 20 пикселей, что позволят установить отступ с лева и с права в 10px не выходя за пределы ширины блока тем самым разделяя их на колонки:

(Css) Calc() для сеток

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

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);
  }
}

Демо: http://codepen.io/tutsplus/pen/VYjKQj


Поддержка браузерами:

(Css) Calc() для сеток

Оригинал статьи: http://webdesign.tutsplus.com/tutorials/calc-grids-are-the-best-grids--cms-22902

0
Comments