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

Question

我有一个使用 Bootstrap 的网格布局，其中每个 div 都有不同的高度。一旦我溢出到下一行，我希望我的 div 进行镶嵌而不是清除上一行中最高的元素。在我的 bootply ，您可以看到第二行的 div 清除了第一行中最后一个元素的高度。

我希望那个 div 向上移动，直接在第一行的第一个元素下面

Answer 1

在这个问题的帮助下:stackoverflow.com/questions/19244268 我能够通过为其 .grid-sizer 元素添加媒体查询来使砖石插件响应屏幕宽度:

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