Css 在网格中排列不同高度的项目

所以我有各种不同维度的UI组件，我把它们放在一个页面中。我想将它们水平排列在一个网格中，其中每一行应该等于该行中具有最大高度的组件的高度。每行没有固定数量的列。构件应彼此相邻放置，而不更改其尺寸，如果该行中没有该构件的空间，则应自动换行到下一行

我尝试使用引导，但我必须为每个组件指定列宽，如

col xs number

，我不能这样做，因为我无法冻结行中的项数

编辑：应用程序使用引导版本3，因此不能使用V4

---

这可能吗？

选中flexbox，bootstrap 4正在使用flexbox，因此您可以拥有不带数字的列

例如：

.container{
边框：1px纯黑；
}
上校：第一种{
背景：白色；
}
.col:n类型（2）{
背景：绿色；
}
.col:最后一种类型{
背景：红色；
}

弗斯特
第二
第三

您无需任何类型的引导，只需对元素使用

display:inline block

下面是一个演示，我在一个container div中添加了12个高度不同的元素，其中container div的宽度在每次运行时都设置为一个随机值，以显示每次如何以不同的方式包装

var高度=[100,20,80,140,65,90,30,70,130,55,75,100]；
对于（变量i=0；i
#x div{
显示：内联块；
垂直对齐：文本顶部；
宽度：50px；
背景：绿色；
利润率：10px；
}
#x{
边框：实心1px#888
}


查看显示：flex+flex wrap:wrap；或我做了完全相同的事情，但问题是，所有项目都没有对齐到行的底部，因此看起来不均匀。哦，我没有看到您添加的
垂直对齐
属性<代码>垂直对齐：底部

对我来说很有用。谢谢有没有一种方法可以使每个元素居中，从而在行的顶部和底部留下相等的空间？嗯，这很简单，

垂直对齐：中间

！