Masonry Grid

The Masonry Grid component arranges items in a responsive, multi-column layout. The number of columns adapts to the screen size, and you can customize breakpoints and column counts using the $mason-break-point SCSS variable.

Description #

The Masonry Grid component creates a flexible, Pinterest-like layout where items are arranged in columns that automatically adjust based on the viewport width. You can control the number of columns at different breakpoints for a fully responsive experience.

• Responsive Columns: The number of columns changes at breakpoints defined by $mason-break-point.

• Customizable Items: Each .mason-item can contain any content, such as cards, images, or other components.

• Easy Integration: Just wrap your items in a .mason container and set the --column-count CSS variable or rely on SCSS breakpoints.

Examples and Classes #

Basic Example

            

                

                    

                        
Item 1
                    
                    

                        
Item 2
                    
                    

                        
Item 3
                    
                    

                        
Item 4
                    
                    

                        
Item 5
                    
                
            
            

                
                
HTML
                
            
            <div class="mason" style="--column-count:3">
    <div class="mason-item radius-all-small">
        <h1 class="txt-high-title on-primary-color">Item 1</h1>
    </div>
    <div class="mason-item radius-all-small">
        <h1 class="txt-high-title on-primary-color">Item 2</h1>
    </div>
    <div class="mason-item radius-all-small">
        <h1 class="txt-high-title on-primary-color">Item 3</h1>
    </div>
    <div class="mason-item radius-all-small">
        <h1 class="txt-high-title on-primary-color">Item 4</h1>
    </div>
    <div class="mason-item radius-all-small">
        <h1 class="txt-high-title on-primary-color">Item 5</h1>
    </div>
</div>
        

Available Classes

Class	Description
.mason	Main container for the masonry grid. Controls the number of columns and layout.
.mason-item	Individual item in the masonry grid. Can contain any content.

Layout Variations

The Masonry Grid supports different column counts at various breakpoints, allowing for highly responsive layouts. You can customize the $mason-break-point SCSS variable to set your own breakpoints and column numbers.

• xl: 5 columns on extra-large screens (e.g., desktops)
• lg: 3 columns on large screens (e.g., tablets)
• md: 2 columns on medium screens (e.g., small tablets or large mobile phones)
• sm: 1 column on small screens (e.g., mobile phones)

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/masonry/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/masonry/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/masonry/script.js	(Optional) JavaScript functionality (currently not required)

SCSS Variables #

            

                
                
SCSS
                
            
            $mason-break-point: (xl: 5, lg: 3, md: 2, sm: 1);
// Usage: customize the number of columns at each breakpoint

.mason {
  @each $break, $count in $mason-break-point {
    @media screen and (max-width: get-break-point-value($break)) {
      column-count: $count;
    }
  }
}

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
(No JS required)	-	The Masonry Grid component does not require JavaScript for its core functionality. Layout is handled by CSS/SCSS.