# Masonry Layout

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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. */

`
File:

- 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;
        }
      }

  `
- URL: /components/raw/masonry-layout/_masonry-layout.scss
- Filesystem Path: components/02-layouts/component-layouts/masonry-layout/_masonry-layout.scss
- Size: 368 Bytes

- Handle: @masonry-layout
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/02-layouts/component-layouts/masonry-layout/masonry-layout.html

No notes defined.