Justify Grid - a new word in the markup

Good day, dear habrazhiteli. To date, the creation of markup for the page roughly speaking is not automated. We perform markup using float or inline-block ( more info). So I want to share with you great ideas - Justify Grid Framefork.

Problem

If we talk about the layout on the float , we are faced with the problem of centering the element and we have to carefully specify all the values ​​of the width and indents. Existing Grid frameworks (for example, 960.gs ) certainly solve this problem. But it turns out that the markup is not correct and developers constantly have to use .clearfix. Plus, problems can arise from fractional pixels. If we talk about the inline-block , the inconvenience appears due to the fact that elements with this value are aligned on the baseline, and not on the upper edge. And if there are several inline-blocks on the page, each of which is located on a new line, then there will be some gaps between them. Any space will affect your layout. The solution is - CSS Grid Layout or Flexible Box Layout , but these solutions are not supported on most browsers.

Justify grid

I will give a small example:

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

')
Everything works thanks to the pseudo-element: after: It is he who indents between the elements. I understand how it works, but I do not understand why it works that way. : after appears after the item ... I'd love to see the details in the comments. . Block width and padding are defined in CSS using the following formula:


And this formula is calculated using one beautiful SASS file:

 $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 - cross-browser. Plus, the framework still allows you to move and add elements using the .push .pull .append .prepend classes. And on the project site there is also a generator of the required CSS from the specified parameters.

Project page - http://justifygrid.com/
Github

Thank you all for your attention