Justify Grid — новое слово в разметке

Доброго времени суток уважаемые читатели. На сегодняшний день создание разметки для страницы грубо говоря не автоматизировано. Разметку мы выполняем с помощью float или inline-block (подробнее ^[1]). Поэтому я хочу поделиться с вами замечательной идей — Justify Grid Framefork.

Проблема

Если говорить о верстке на float, то мы сталкиваемся с проблемой центрирования элемента и нам приходиться скурпулезно указывать все значения ширины и отступов. Эту проблему безусловно решают существующие Grid фреймворки (к примеру 960.gs ^[2]). Но получается симантически не верная разметка и разработчикам постоянно приходиться использовать .clearfix. Плюс ко всему проблемы могут возникнуть из за дробных пикселей. Если говорить об inline-block, то неудобства появляются из за того, что элементы с этим значением выравниваются по базовой линии, а не по верхнему краю. А если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки. Любой пробел повлияет на Ваш layout. Решение есть — CSS Grid Layout ^[3] или Flexible Box Layout ^[4], но эти решения не поддерживаются на большинстве браузеров.

Justify Grid

Приведу небольшой пример:

<div class="main">
  <h1>Image Gallery</h1>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

.main {
  text-align: justify;
  font-size: 0;
}
.main:after {
  content: '';
  display: inline-block;
  width: 100%;
}
h1, .image {
  text-align: left;
  font-size: medium;
}
.image {
  vertical-align: top;
  display: inline-block;
  width: 30.3571%;
}

Все работает благодаря псевдо-элементу :after: Именно он делает отступы между элементами. Я понимаю как он работает, но я не понимаю почему он так работает. :after появляется после элемента… Очень хотелось бы увидеть подробности в комментариях.. Ширина блоков и отступы определяются в CSS с помощью следующей формулы:

А формула эта высчитывается с помощью одного прекрасного SASS файлика:

$columns: 12 !default;
$column-width: 4em !default;
$gutter-width: 2.5em !default;

%grid {
  text-align: justify !important;
  text-justify: distribute-all-lines;
  font-size: 0 !important;

  & > * {
    text-align: left;
    font-size: medium;
  }

  &:after {
    content: '';
    display: inline-block;
    width: 100%;
  }
}

%grid-cell {
  vertical-align: top;
  display: inline-block;
  width: 100%;
}

@function grid-span($cols, $total: $columns) {
  @return ($column-width * $cols  + $gutter-width * ($cols  - 1)) /
          ($column-width * $total + $gutter-width * ($total - 1)) * 100%;
}

Justify Grid — кроссбраузерный. Плюс фреймворк позволяет еще передвигать и добавлять элементы с помощью классов .push .pull .append .prepend. А на сайте проекта имеется и генератор нужного CSS из заданных параметров.

Страничка проекта — http://justifygrid.com/ ^[5]
GitHub ^[6]

Спасибо всем за внимание

Автор: ilusha_sergeevich

Источник ^[7]