css grid布局实现瀑布流

CSS Grid 布局是一种二维布局系统，可以将页面分成行和列来创建布局。瀑布流布局是一种常见的网页布局方式，可以让图片或者其他元素依次排列，并且每一列的高度相等，使页面呈现出瀑布流的效果。使用 CSS Grid 布局可以实现瀑布流布局，具体步骤如下：

1. 在父元素上应用 grid 布局，将其划分为多个网格列，每一列的宽度相等，并且宽度可以根据需要进行调整。

2. 将子元素放置到网格中，使用 grid-row-start 和 grid-row-end 属性来指定子元素所占的行数，并且使用 grid-column-start 和 grid-column-end 属性来指定子元素所占的列数。

3. 在每一列的最后一个子元素上设置 margin-bottom 属性来控制列与列之间的间距，使得每一列的高度相等。

下面是一个实现瀑布流布局的示例代码：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

.item {
  grid-row-end: span 2;
}

.item:nth-child(3n) {
  grid-row-end: span 3;
}

.item:last-child {
  margin-bottom: 0;
}