瀑布流布局2

要实现瀑布流布局中让图片先排满第一行再排第二行，你可以使用 CSS 的多列布局（CSS multi-column layout）来控制。目前你的布局使用了 column-count 和 column-gap 来定义列数和列之间的间隙，但这会导致在不同列之间平均分布元素。

要实现你的需求，你可以考虑以下方法：

• 使用 Flexbox 布局：将容器 #grid-container 的 display 属性设置为 display: flex;，然后将子项 .item 添加到容器中。这样，子项将按照默认的 flex 行为依次排列，先排第一行再排第二行。示例代码如下：

在上面的示例中，我们使用 Flexbox 布局将子项按照你的要求排列。你可以根据需要进一步调整列数和间隙。

• 使用 CSS Grid 布局：另一种方法是使用 CSS Grid 布局，通过定义网格行和列来排列元素。这种方法更加灵活，允许你精确控制每个元素的位置。示例代码如下：
   

这两种方法都可以实现你的需求，你可以根据项目的具体要求选择其中之一。

案例：实现以下瀑布流布局，并且序号是先横向排列在换行排第二行
        

代码