Masonry CSS & JS

Install

npm install @mrbakieness/npm_masonary --save-dev

Useage

To use the module first you have to import the module into your main JavaScript file.

import '../node_modules/@mrbakieness/npm_masonary/main.js';

Example

Once the module has been imported use the follwing to turn a container and its child elements to a masonry layout.

masonary('.container', '.items'); 

Advanceed Example

There are a few options that can be used to customise the masonry layout they are the following:

| Option | Description | Default | | --------- | ----------------------------------------------------------- | -----: | | columns | Number of columns the layout should use at max screen size. | 4 | | margin | Margin for each element, so the layout is even. In pixels | 15 | | max_width | maximum width of the layout. In pixels | 1200 |

To use these options use the following code.

masonary('.container', '.items', {
    columns: 6,
    margin: 20,
    max_width: 1000
});

Not all options have to be used, you can pick and choose which one or two you want.

To set just a custom margin:

masonary('.container', '.items', {
    margin: 20,
});

To make a 6 column layout with a max width of 1000px but use the default margin property:

masonary('.container', '.items', {
    columns: 6,
    max_width: 1000
});