Minimalist Dependency-Free Masonry Layout Library | MiniMasonry.js

MiniMasonry is a lightweight (1kb Gzipped) Masonry layout (stone design) and has dependency-free. It will calculate the positions of the elements in Javascript and update their positions using the CSS transform attribute. This means that positioning does not trigger the browser layout and the device’s GPU usage. This also allows moving the css while positioning the element.

MiniMasonry is very responsive, you give it a target width and it will adjust the column number and the width of the elements. MiniMasonry.js will increase the width of the element (so that another column can fit in the layout) but it will never reduce the width of the target.

Must Read: A Javascript Plugin for Filtering Items from a ‘Masonry’ Grid | Isolde

How to make use of it:

1. You can install MiniMasonry by cloning the repository, downloading the build type (minimasonry.min.js / minimasonry.esm.js), or using npm:

npm install minimasonry

2. Next, include the minified version of MiniMasonry.js on your website:

<script src="node_modules/minimasonry/build/minimasonry.min.js"></script>

3. Or use it over ESM:

import MiniMasonry from "minimasonry";

4. To use MiniMasonry you need to have a relatively placed container with your items as babies. These children’s items must be placed absolutely.

var masonry = new MiniMasonry({
    container: '.masonry_transition'


Here is the list of available parameters:

Must Read: Responsive And Lightweight Masonry Grid jQuery Plugin

NameDefault valueDescription
baseWidth (int)255Target width of elements.
container (string|HTMLElement)NullContainer’s selector or element. Required
gutter (int)10Width/height of gutter between elements. Use gutterX / gutterY to set different values.
gutterX (int)nullWidth of gutter between elements. Need gutterY to work, fallback to gutter.
gutterY (int)nullHeight of gutter between elements. Need gutterX to work, fallback to gutter.
minify (boolean)trueWhether or not MiniMasonry places elements on the shortest column or keeps the exact order of the list.
surroundingGutter (boolean)trueSet the left gutter on the first column and the right gutter on the last.
ultimateGutter (int)5A gutter is applied when only 1 column can be displayed.
direction (string)“ltr”Sorting direction, “ltr” or “rtl”.
wedge (boolean)falseFalse will start to sort from the center, and true will start from left or right according to the direction parameter.


Here is the list of available APIs :

layout()If the list has changed, trigger a re-layout of the masonry.
destroy()Remove the resize listener and set back the container as it was before initialization.

See Demo And Download


Official Website(Spope): Click Here

This superior jQuery/javascript plugin is developed by Spope. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…

Leave a Reply

Your email address will not be published. Required fields are marked *