Grid system

Usage

Default flexbox implementation:

The default flexbox implementation formats the content according to the following rules:

  • every column has an ideal width of 100%/12 and expands when needed
  • every column expands to fill in the remaining space if the maximum of 12 columns isn't reached

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore facere laboriosam nam reiciendis repellat tempora! Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore facere laboriosam nam reiciendis repellat tempora! Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore facere laboriosam nam reiciendis repellat tempora! Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore facere laboriosam nam reiciendis repellat tempora! Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore facere laboriosam nam reiciendis repellat tempora! Architecto at dolores excepturi iure magni necessitatibus nisi nulla quam rerum sunt voluptate, voluptatum!

The code for which would be:

          
<div class="sq-grid css-flexbox">
    <div class="col">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Blanditiis dolore facere laboriosam nam reiciendis repellat tempora!
        Architecto at dolores excepturi iure magni necessitatibus nisi nulla 
        quam rerum sunt voluptate, voluptatum!
    </div>
    ...
</div>