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

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

Проблема

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

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/
GitHub

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