masonry grid is a grid system effect that makes the columns flow up tailing each other based on the available vertical space.
masonry grid is different then other grid modes it doesn't work with columns classes like col-# but it works with multiple classes given to the row element a class for each screen that define how many columns you want to show per row and goes like this masonry-s-#x1 and just like the standard grid it holds a predefined 12 columns for each screen/device size and the columns only take one class name column see the example below.
<div class="masonry-2x1 masonry-m-3x1 masonry-l-4x1">
<!-- Column -->
<div class="column">...</div>
<!-- Column -->
<div class="column">...</div>
<!-- Column -->
<div class="column">...</div>
</div>
| Options | Extra small | small | Medium | Large | Extra Large |
|---|---|---|---|---|---|
| Screen Size | <== 576px | 576px ==> | 768px ==> | 1024px ==> | 1366px ==> |
| Class prefix’s | masonry-#x1 | masonry-s-#x1 | masonry-m-#x1 | masonry-l-#x1 | masonry-xl-#x1 |
| Default # of columns | 12 columns and can be change via sass. | ||||
| Default Columns Gutter | 30px (15px on each side of a column) | ||||
| Nesting Support | Fully Support |