Trowl
Masonry-style grid library.
- Ultra-lightweight (1kb uglified and gzipped)
- Uses CSS Grid
- Zero dependencies
Installation
npm install trowl
Usage
Import it: import trowl from 'trowl';
Prepare your HTML
...
Use it:
const numberOfColumns = 5; // The number of columns in the gridconst gapSize = 10; // The size of the gap between items in pixelsconst callback = ; // A callback after the grid has finished sorting items;
Tip
I would make the grid opacity: 0
and use the callback to make it 1
with a low transition time (0.2s). There is a small chance that for a few microseconds, the interface shuffles about as it adjusts items.