Masonry Layout 

<p>Replace the div with your component and add span classes in the order that is shown below to get the masonry layout</p>

<section class="masonry-grid">
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-5"></div>
    <div class="grid-demo span-3"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-3"></div>
    <div class="grid-demo span-5"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-4"></div>
</section>

<p>With <code>masonry-grid--alternating-asymmetric</code>: no span classes needed, pattern alternates 5+3 / 3+5</p>

<section class="masonry-grid masonry-grid--alternating-asymmetric">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>

<p>With <code>masonry-grid--mixed</code>: no span classes needed, pattern alternates 4+4 / 5+3 / 4+4 / 3+5</p>

<section class="masonry-grid masonry-grid--mixed">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>
 
<p>Replace the div with your component and add span classes in the order that is shown below to get the masonry layout</p>

<section class="masonry-grid">
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-5"></div>
    <div class="grid-demo span-3"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-3"></div>
    <div class="grid-demo span-5"></div>
    <div class="grid-demo span-4"></div>
    <div class="grid-demo span-4"></div>
</section>

<p>With <code>masonry-grid--alternating-asymmetric</code>: no span classes needed, pattern alternates 5+3 / 3+5</p>

<section class="masonry-grid masonry-grid--alternating-asymmetric">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>

<p>With <code>masonry-grid--mixed</code>: no span classes needed, pattern alternates 4+4 / 5+3 / 4+4 / 3+5</p>

<section class="masonry-grid masonry-grid--mixed">
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
    <div class="grid-demo"></div>
</section>
 
/* No context defined. */
  • Content: 
    .masonry-grid {
  display: grid;
  grid-gap: $spacer-md;

  .case-list-teaser__body {
    top: 0;
  }
}

@media screen and (min-width: $grid-breakpoint-md-lg) {
  .masonry-grid {
    grid-template-columns: repeat(8, minmax(6rem, 1fr));
  }

  .span-4 {
    grid-column: span 4;
  }

  .span-3 {
    grid-column: span 3;
  }

  .span-5 {
    grid-column: span 5;
  }

  // 5+3, 3+5, 5+3, 3+5, ...
  .masonry-grid--alternating-asymmetric {
    > *:nth-child(4n + 1),
    > *:nth-child(4n + 4) {
      grid-column: span 5;
    }

    > *:nth-child(4n + 2),
    > *:nth-child(4n + 3) {
      grid-column: span 3;
    }
  }

  // 4+4, 5+3, 4+4, 3+5, ...
  .masonry-grid--mixed {
    > *:nth-child(4n + 1),
    > *:nth-child(4n + 2) {
      grid-column: span 4;
    }

    > *:nth-child(4n + 3) {
      grid-column: span 5;
    }

    > *:nth-child(4n + 4) {
      grid-column: span 3;
    }
  }
}
  • URL: /components/raw/masonry-layout/_masonry-layout.scss
  • Filesystem Path: components/02-layouts/component-layouts/masonry-layout/_masonry-layout.scss
  • Size: 892 Bytes
  • Handle: @masonry-layout
  • Preview:
  • Filesystem Path: components/02-layouts/component-layouts/masonry-layout/masonry-layout.html

No notes defined.