Grid

Customization	Reference
HTML selector	🔧 [data-arts-component-name="Grid"]
Component source	📄 HTML/js/components/Grid.js
Component source (gulp)	📄 SOURCE/components/grid/Grid.js

Default Options

defaults: {
  filterSticky: {
    trigger: 'self',
    offsetTop: 0,
    offsetHeaderHeight: false,
    matchMedia: '(min-width: 992px)',
    toggleStickyClass: 'sticking',
    toggleStickyColorTheme: false,
    toggleHeaderVisibility: false,
    autoScrollToGrid: false
  },
  filterItemActiveClass: 'filter__item_active',
  filterItemAttribute: 'data-filter',
  filterDrawEffect: true
}

HTML Markup

<section
  class="js-grid"
  data-arts-component-name="Grid"
  data-arts-component-options="{}"
>
  <!-- Grid filter -->
  <div class="js-grid__col-filter">
    ...
  </div>
  <!-- - Grid filter -->
  <!-- Grid items -->
  <div class="js-grid__col-grid">
    <div class="row g-gutters js-grid__container">
      <div class="col-12 col-sm-6 col-lg-4 js-grid__item category-fashion">
        ...
      </div>
      <div class="col-12 col-sm-6 col-lg-4 js-grid__item category-interiors">
        ...
      </div>
      <div class="col-12 col-sm-6 col-lg-4 js-grid__item category-experimental">
        ...
      </div>
      <div class="col-12 col-sm-6 col-lg-4 js-grid__item category-outdoors">
        ...
      </div>
      <div class="col-12 col-sm-6 col-lg-4 js-grid__item category-outdoors">
        ...
      </div>
      <div class="col-12 col-sm-6 col-lg-4 js-grid__item category-portraits">
        ...
      </div>
    </div>
  </div>
  <!-- - Grid items -->
</section>