Grid

A simpel and elegant Flexbox-based 6-column grid system. Grid cells automatically take up as much available space as possible unless otherwise specified. Grid cells can be fixed to a set number of columns using the data-columns attribute with a value from 1 to 6.

      <div class="container">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="row">
    <div class="column" data-columns="2"></div>
    <div class="column"></div>
    <div class="column" data-columns="2"></div>
  </div>
  <div class="row">
    <div class="column" data-columns="1"></div>
    <div class="column" data-columns="1"></div>
    <div class="column"></div>
  </div>
</div>
    

Media Object

This is the body of the media object

Viverra porta lectus. Sed lacus leo, feugiat at, consectetuer eu, luctus quis, risus. Suspendisse faucibus orci et nunc. Nullam vehicula fermentum risus.

Fusce felis nibh, dignissim vulputate, ultrices quis, lobortis et, arcu. Duis aliquam libero non diam. Vestibulum placerat tincidunt tortor. Ut vehicula ligula quis lectus. In eget velit.

      <div class="media">
  <img class="media-figure" data-src="holder.js/80x80" alt="Media figure">
  <div class="media-body u-compact">
    <h4 class="media-title">This is the body of the media object</h4>
    <p>Viverra porta lectus. Sed lacus leo, feugiat at, consectetuer eu, luctus quis, risus. Suspendisse faucibus orci et nunc. Nullam vehicula fermentum risus.</p>

    <p>Fusce felis nibh, dignissim vulputate, ultrices quis, lobortis et, arcu. Duis aliquam libero non diam. Vestibulum placerat tincidunt tortor. Ut vehicula ligula quis lectus. In eget velit.</p>
  </div>
</div>
    