furygrid v1.0.3

FuryGrid

Great liblary use Isotope masonry layout - Advandce options multiple columns, spacings & support responsive :zap:. FuryGrid preview image

Demo

git clone https://github.com/Huynhhuynh/furygrid.git
cd furygrid
npm install
npm run start:dev

Ideal html structure

<div id="furygrid-element">
    <div class="furygrid-sizer"></div>
    <div class="furygrid-gutter-sizer"></div>
    <div class="furygrid-item">...</div>
    <div class="furygrid-item">...</div>
    ...
</div>

Package manager npm

npm i furygrid -S

Call plugin

import FuryGrid from 'furygrid';

const FuryGrid_Obj = new FuryGrid({
  El: document.getElementById('furygrid-element'),
});

Options

{
  El: '#furygrid-element',
  ItemSelector:         '.furygrid-item',
  ColumnWidth:          '.furygrid-sizer',
  Gutter:               '.furygrid-gutter-sizer',
  Col:                  4,
  Space:                24,
  PercentPosition:      false,
  CustomClass:          '',
  Responsive: {
    1024: {
      Col: 3,
      Space: 24,
    },
    780: {
      Col: 2,
      Space: 24,
    },
    480: {
      Col: 1,
      Space: 24,
    }
  }
}