Grids

All the grids in the template are based on Isotope (opens new window) plugin. Whenever you want to create a grid, use js-gallery class as 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 number of columns per each breakpoint. Required to calculate correct on-scroll reveal stagger animation.

Grid Attributes

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

Grid Items Attributes

• grid__item_desktop-6 class – grid item column width on desktop. Analogue of 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.