Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Masonry Grid - Tornado UI

masonry grid is a grid system effect that makes the columns flow up tailing each other based on the available vertical space.

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>

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

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.