Masonry

Using Masonry add a grid layout to your page that arranges items to the available space.

Usage

Use the size-width utility to create your grid.


  <div class="masonry" data-module="Masonry">
    <div class="masonry__sizer"></div>
    <div class="masonry__item size-width-50">...</div>
    ...
  </div>

Images

Use the masonry-layout modifier to quickly build a grid to a specfic layout without needing modifier classes on your masonry items.

Open this example in a new window


  <div class="masonry masonry--layout-feature" data-module="Masonry">
    <div class="masonry__sizer"></div>
    <div class="masonry__item">
      <img src="..." alt="...">
    </div>
    ...
  </div>

Layouts

masonry--layout-feature