Search code examples
jquerycsshtmlmasonry

Masonry Layout using css

I'm working with masonry using column-count in css. Here I got the masonry layout but I problem is when I was added content then second column div divide into parts half div move to column1 and half in the column2 according to the height of the content. My question how should I achieve this masonry layout using css. enter image description here

#container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}
<div id="container" class="cols">
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box five">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box six">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
</div>

Solution

  • I updated your code by adding the break-inside: avoid; prop. Check the support here

    #container {
  width: 70%;
  margin: 0 auto;
  background-color: red;
}

.cols {
  -moz-column-count: 3;
  -moz-column-gap: 3%;
  -moz-column-width: 30%;
  -webkit-column-count: 3;
  -webkit-column-gap: 3%;
  -webkit-column-width: 30%;
  column-count: 3;
  column-gap: 3%;
  column-width: 30%;
}

.box {
  margin-bottom: 20px;
box-sizing: border-box;
-webkit-column-break-inside: avoid;
break-inside: avoid;
counter-increment: item-counter;
}

.box.one {
  height: auto;
  background-color: #d77575;
}

.box.two {
  height: auto;
  background-color: #dcbc4c;
}

.box.three {
  background-color: #a3ca3b;
  height: auto;
}

.box.four {
  background-color: #3daee3;
  height: auto;
}

.box.five {
  background-color: #bb8ed8;
  height: auto;
}

.box.six {
  background-color: #baafb1;
  height: auto;
}

article.post__layout {
  box-shadow: 0 0px 7px 0 rgba(75, 122, 175, 0.33);
}

.image {
  width: 100%;
  height: auto;
}

img {
  width: 100%;
  height: auto;
}

p {
  padding: 40px 20px;
}
    <div id="container" class="cols">
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae ests in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem
        vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrs in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutr ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam rutrum vitae placerat
        porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box five">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box one">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box six">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box three">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
  <div class="box two">
    <article class="post__layout">
      <div class="image">
        <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
      </div>
      <p>Vivamus in lVivamus in leo vulputate, eleifend elit nec, porta libero. Nullam rutrum sem vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Sus vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convaero. Nullam
        rutrum vitae placerat porttitor. Proin et erat vitae est ultrices sollicitudin. Suspendisse ac massa vel tellus convallis venenatis et quis sapien. Fusce in enim…</p>
    </article>
  </div>
</div>