furygrid
v1.0.3
Published
Grid masonry multiple columns & gap
Downloads
3
Readme
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,
}
}
}