CSS Masonry Grid

By Rafi

F6
#
layout grid masonry
How do I use This?

CSS only masonry type grid layout.

HTML
<div class="masonry-css">
  <div class="masonry-css-item">
    <img src="https://placehold.it/300x300" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labore, aspernatur nihil distinctio fugit sint facilis sunt eius fugiat iusto blanditiis tenetur alias ut.</div>
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labore, a ut.</div>
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Op.</div>
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/300x600" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/300x200" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labore, aspernatur nihil distinctio fugit sint facilis sunt eius fugiat iusto blanditiis tenetur alias ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio beatae deserunt quisquam similique vitae hic eveniet, velit, natus unde tempora excepturi labore, veniam necessitatibus. Vitae, magnam sequi. Veritatis, cumque, iste?</div>
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/700x200" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/350x400" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labo?</div>
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, la, consectetur adipisicing elit. Odio beatae deserunt quisquam similique vitae hic eveniet, velit, natus unde tempora excepturi labore, veniam necessitatibus. Vitae, magnam sequi. Veritatis, cumque, iste?</div>
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/450x400" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labore, aspernatur nihil distinctio fugit sint facilis sunt eius fam necessitatibus. Vitae, magnam sequi. Veritatis, cumque, iste?</div>
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/350x80" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/400x400" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <img src="https://placehold.it/440x400" class="" height="" width="" alt="">
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labore, aspernatur nihil distinctio fugit sint facilis sunt eius fam necessitatibus. Vitae, magnam sequi. Veritatis, cumque, iste?</div>
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labore, aspernatur nihil distinctio fugit sint facilis sunt eius fam necessitatibus. Vitae, magnam sequi. Veritatis, cumque, iste?</div>
  </div>
  <div class="masonry-css-item">
    <div class="callout">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio aliquam, corrupti, quis rem beatae quidem, labore, aspernatur nihil distinctio fugit sint facilis sunt eius fam necessitatibus. Vitae, magnam sequi. Veritatis, cumque, iste?</div>
  </div>
</div>


$masonry-css-column-gap: $global-margin;

.masonry-css {
  column-count: 1;
  column-gap: $masonry-css-column-gap;

  @include breakpoint(400px) {
    column-count: 2;
  }

  @include breakpoint(600px) {
    column-count: 3;
  }

  @include breakpoint(800px) {
    column-count: 4;
  }

  @include breakpoint(1100px) {
    column-count: 5;
  }
}

.masonry-css-item {
  break-inside: avoid;
  margin-bottom: $masonry-css-column-gap;
}




.masonry-css {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
}

@media screen and (min-width: 25em) {
  .masonry-css {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

@media screen and (min-width: 37.5em) {
  .masonry-css {
    -webkit-column-count: 3;
            column-count: 3;
  }
}

@media screen and (min-width: 50em) {
  .masonry-css {
    -webkit-column-count: 4;
            column-count: 4;
  }
}

@media screen and (min-width: 68.75em) {
  .masonry-css {
    -webkit-column-count: 5;
            column-count: 5;
  }
}

.masonry-css-item {
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: 1rem;
}
JS

Similar Building Blocks

containers

App Feature Section

F6
by Rafi
containers

Todo List Card

F6
by Kevin Ball
containers

CSS Grid - Holy Grail Layout

F6
by Christine Siu