在网格中，使用CSS浮动元素的左上角对齐，即使它们的高度不同。
18 浏览
在网格中，使用CSS浮动元素的左上角对齐，即使它们的高度不同。
请问如何实现图1中的效果。
到目前为止，我得到的结果是：
.box { display: inline-block; vertical-align: top; width: 100px;}
这给我带来了图2中所示的结果。
（注意：我知道我可以使用float: left来实现相同的效果）
我的HTML代码大致如下：
A B C D E F G H I
我希望每个元素都向左浮动，同时向上浮动。
是否可以使用纯CSS来实现这个效果，还是需要一些JavaScript？
编辑：
对我来说，整个网格位于页面中心非常重要。这就是为什么我使用display:inline-block。网格也不应固定在页面上，因为我希望在调整窗口大小时重新排列。