<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> 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>
/* No context defined. */
  • Content:
    .masonry-grid {
      display: grid;
      grid-gap: $spacer-md;
    
      .case-teaser {
        margin-bottom: 0;
      }
    
      .case-teaser__body {
        top: 0;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md-lg) {
      .masonry-grid {
        grid-gap: $spacer-md;
        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;
      }
    }
    
  • URL: /components/raw/masonry-layout/_masonry-layout.scss
  • Filesystem Path: components/02-layouts/component-layouts/masonry-layout/_masonry-layout.scss
  • Size: 433 Bytes
  • Handle: @masonry-layout
  • Preview:
  • Filesystem Path: components/02-layouts/component-layouts/masonry-layout/masonry-layout.html

No notes defined.