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

Patterns

Masonry pattern 1

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

Masonry Pattern 2

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

Masonry Pattern 3

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

Masonry Pattern 4

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

Masonry Pattern 5

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

Masonry Pattern 6

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

Masonry Pattern 7

1
2
3
4
5
6
7
8
9
10
11
12
html 
<div class="masonry masonry-pattern-7">
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">1</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">2</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">3</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">4</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">5</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">6</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">7</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">8</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">9</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">10</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">11</div>
    </div>
  </div>
  <div class="masonry-item">
    <div class="wrapper text-bg-primary">
      <div class="wrapper-content text-center">12</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;