HTML + CSS: Card layout that doesn't clear all items in previous row

Question

I have a grid layout using Bootstrap where each div has a different height. Once I overflow onto the next row, I'd like my divs to tessellate rather than clearing the tallest item from the previous row. In my bootply, you can see the div on the second row clears the last items height in the first row.

I'd like that div to move up, directly under the first item in the first row

take a look at this question: http://stackoverflow.com/questions/19244268/bootstrap-fluid-grid-system-with-different-height/19244925 — Carol Skelly, Oct 13 '16 at 10:20
I've looked through masonry but I need mine to be responsive and have the ability to change the number of columns based on screen width — Jeremy Thomas, Oct 13 '16 at 18:58

score 0 · Answer 1 · answered Oct 13 '16 at 19:11

With the help of this question: stackoverflow.com/questions/19244268 I was able to make the masonry plug in respond to screen width by adding media queries for their .grid-sizer element:

.grid-sizer,
.grid-item {
  width: 50%;
}

@media (min-width: 768px) { 
    .grid-sizer,
    .grid-item {
        width: 50%; 
    }
}
@media (min-width: 992px) { 
    .grid-sizer,
    .grid-item {
        width: 33%; 
    } 
}
@media (min-width: 1200px) { 
    .grid-sizer,
    .grid-item {
        width: 25%; 
    } 
}
@media (min-width: 1600px) { 
    .grid-sizer,
    .grid-item {
        width: 20%; 
    } 
}

HTML + CSS: Card layout that doesn't clear all items in previous row

1 Answers1