Grids

All the grids in the template are based on the Isotope (opens new window) plugin. Whenever you want to create a grid, use the js-gallery class as the outer wrapper. In that wrapper, store all the items according to the markup below.

Markup

<section
  class="section section-grid overflow" 
  data-arts-os-animation="data-arts-os-animation" 
  data-grid-columns="2" 
  data-grid-columns-tablet="2" 
  data-grid-columns-mobile="1"
>
  <div class="container">
    <div class="grid grid_fluid-6 js-grid">
      <!-- grid sizer -->
      <div class="grid__item grid__item_desktop-6 grid__item_tablet-6 grid__item_mobile-12 grid__item_fluid-6 grid__item_fluid-6-fancy grid__sizer js-grid__sizer"></div>
      <!-- - grid sizer -->
      <!-- grid item 1 -->
      <div class="grid__item grid__item_desktop-6 grid__item_tablet-6 grid__item_mobile-12 grid__item_fluid-6 grid__item_fluid-6-fancy js-grid__item">
        ...
      </div>
      <!-- - grid item 1 -->
      <!-- grid item 2 -->
      <div class="grid__item grid__item_desktop-6 grid__item_tablet-6 grid__item_mobile-12 grid__item_fluid-6 grid__item_fluid-6-fancy js-grid__item">
        ...
      </div>
      <!-- - grid item 2 -->
      <!-- grid item 3 -->
      <div class="grid__item grid__item_desktop-6 grid__item_tablet-6 grid__item_mobile-12 grid__item_fluid-6 grid__item_fluid-6-fancy js-grid__item">
        ...
      </div>
      <!-- - grid item 3 -->
    </div>
  </div>
</section>

Section Attributes

• data-grid-columns, data-grid-columns-tablet, data-grid-columns-mobile – explicitly set the number of columns for each breakpoint. Required to calculate the correct on-scroll reveal stagger animation.

Grid Attributes

• js-grid class – required class to construct the Isotope grid.
• grid_fluid-6 class – grid outer paddings in vw. The -6 suffix means 6vw. The suffix accepts numbers [1...6].

Grid Items Attributes

• grid__item_desktop-6 class – grid item column width on desktop. Analogous to Bootstrap col-* classes. 6/12 = 50% width, 4/12 = 33.3333% width, 12/12 = 100% width, etc.
• grid__item_tablet-6 class – grid item column width on tablet.
• grid__item_mobile-12 class – grid item column width on mobile.