Skip to main content Skip to docs navigation
View on GitHub

Masonry

Masonry is a grid layout technique that places elements in an optimal position based on available vertical space, similar to a mason fitting stones in a wall.

On this page

Groups

Masonry blocks can be consolidated into groups, allowing for the creation of larger and more complex layout structures, enhancing the overall aesthetic and user experience of a website.

Masonry group 1

1
2
3
4
5
6
7
8
9
10
html 
<div class="masonry masonry-group-2">
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-4">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">1</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">2</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">3</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-1">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">4</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-3">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">5</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">6</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">7</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-6">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">8</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">9</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">10</div>
        </div>
      </div>
    </div>
  </div>
</div>

Masonry group 2

1
2
3
4
5
6
7
8
9
10
html 
<div class="masonry masonry-group-2">
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-4">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">1</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">2</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">3</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-1">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">4</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-3">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">5</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">6</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">7</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-vertical-3">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">8</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">9</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">10</div>
        </div>
      </div>
    </div>
  </div>
</div>

Masonry group 3

1
2
3
4
5
6
7
8
html 
<div class="masonry">
  <div class="masonry-group-item">
    <div class="masonry masonry-horizontal-1">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">1</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-horizontal-2">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">2</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">3</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-horizontal-3">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">4</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">5</div>
        </div>
      </div>
    </div>
  </div>
  <div class="masonry-group-item">
    <div class="masonry masonry-horizontal-4">
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">6</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">7</div>
        </div>
      </div>
      <div class="masonry-item">
        <div class="wrapper py-5 text-bg-primary">
          <div class="wrapper-content text-center">8</div>
        </div>
      </div>
    </div>
  </div>
</div>

Vertical layouts

Masonry blocks in web design can be grouped in vertical layouts, allowing for dynamic and visually engaging arrangements while optimizing available vertical space.

Vertical layout 1

1
html 
<div class="masonry masonry-vertical-1">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
</div>

Vertical layout 2

1
2
html 
<div class="masonry masonry-vertical-2">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
</div>

Vertical layout 3

1
2
3
html 
<div class="masonry masonry-vertical-3">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">3</div>
    </div>
  </div>
</div>

Vertical layout 4

1
2
3
html 
<div class="masonry masonry-vertical-4">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">3</div>
    </div>
  </div>
</div>

Vertical layout 5

1
2
3
html 
<div class="masonry masonry-vertical-5">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">3</div>
    </div>
  </div>
</div>

Vertical layout 6

1
2
3
html 
<div class="masonry masonry-vertical-6">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">3</div>
    </div>
  </div>
</div>

Vertical layout 7

1
2
html 
<div class="masonry masonry-vertical-7">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
</div>

Vertical layout 8

1
2
3
4
html 
<div class="masonry masonry-vertical-8">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">3</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">4</div>
    </div>
  </div>
</div>

Horizontal layouts

Masonry blocks also have the capability to be grouped in horizontal layouts, which can be utilized to create wide, diverse, and visually interesting structures on a webpage.

Horizontal layout 1

1
html 
<div class="masonry masonry-horizontal-1">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
</div>

Horizontal layout 2

1
2
html 
<div class="masonry masonry-horizontal-2">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
</div>

Horizontal layout 3

1
2
html 
<div class="masonry masonry-horizontal-3">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
</div>

Horizontal layout 4

1
2
3
html 
<div class="masonry masonry-horizontal-4">
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper py-5 text-bg-primary">
      <div class="wrapper-content text-center">3</div>
    </div>
  </div>
</div>

CSS

Variables

src/scss/_masonry.scss 
--#{$prefix}masonry-gap: #{$masonry-gap};

Sass variables

src/scss/_variables.scss 
$masonry-gap: 5px;
$masonry-breakpoint: md;
$masonry-group-breakpoint: xl;