How to use Masonry Grid
masonry grid is different then other grid modes it dosent work with columns classes like col-# but it works with multiple classes givin 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>Responsive Class Pattern
| 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 | ||||