Mason Grid Overview

The Mason grid layout allows for a responsive arrangement of items, adjusting the number of columns based on screen size. The column counts can be customized using the $mason-break-point variable.

    

    

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

Understanding $mason-break-point

The $mason-break-point variable defines responsive breakpoints for the Mason grid layout. Each key-value pair specifies a screen size and the corresponding number of columns to display.

For instance:

• 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)