Colcade
Lightweight masonry layout
Colcade vs. Masonry
Masonry is great, but it has grown big as it has grown older. Colcade is designed to be small & fast. I recommend using Colcade over Masonry, but read over this feature comparison.
Same features
- Masonry grid layout
- Works as a jQuery plugin or with vanilla JS
- Initialize in HTML
Better features
- Much smaller. 1/8 the size of Masonry
- Better fluid/responsive layout, using native browser positioning
- One file, no dependencies, no package
dist
built file - Does not require imagesLoaded when using images
Worse features
- No multi-column-spanning items
OK | No
#### #### #### | ########## ####
#### #### #### | ########## ####
#### |
#### #### | #### ##########
#### #### #### | #### ##########
#### #### #### | ####
#### |
- No built-in item transitions for layout, appending, prepending, or removing
- No stamps
- No fitWidth centering
Install
Download: colcade.js
CDN:
npm: npm install colcade
Bower: bower install colcade
Demos
Usage
Colcade works by moving item elements into column elements.
HTML
<!-- columns --><!-- items -->............
CSS
Sizing of the columns is handled by your own CSS. Change the number of columns by hiding or showing them.
/* Using floats *//* 2 columns by default, hide columns 2 & 3 *//* 3 columns at medium size */{/* show column 2 */}/* 4 columns at large size */{/* show column 3 */}
/* with flexbox *//* 2 columns by default, hide columns 2 & 3 *//* 3 columns at medium size */{/* show column 2 */}/* 4 columns at large size */{/* show column 3 */}
Initialize Colcade
Set selectors for column and item elements in the options.
With jQuery. Edit jQuery demo on CodePen
With vanilla JS. Edit vanilla JS demo on CodePen
// element as first argumentvar grid = document;var colc = gridcolumns: '.grid-col'items: '.grid-item';// selector string as first argumentvar colc = '.grid'columns: '.grid-col'items: '.grid-item';
With HTML. Edit HTML demo on CodePen
...
Methods
append
Add items to end of layout.
// jQuery$grid// vanilla JScolc
prepend
Add items to beginning of layout.
// jQuery$grid// vanilla JScolc
destroy
Remove Colcade behavior completely.
// jQuery$grid// vanilla JScolc
By David DeSandro
MIT License. Have at it.