瀑布流如何从左到右布局

瀑布流布局通常是从左到右逐列展开的，这意味着当元素填充一行后，会开始新的一行。在CSS中，通过设置网格系统的列和行来实现这个效果。这里是一个基本的例子：

1. **设置网格容器**:
将容器的 `display` 属性设置为 `grid`，并且设置列的数量和方向。默认情况下，`grid-template-columns` 设置成等宽的列。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 设置每个单元格的最小宽度和自动填充满 */
  grid-auto-rows: auto; /* 默认行高，可以根据需要调整 */
  justify-content: flex-start; /* 从左边开始放置项目 */
  gap: 1rem; /* 单元格间的间隔 */
}

2. **项目样式**:
对于每个网格项（`.grid-item`），你可以设置其背景色、内边距等。

.grid-item {
  background-color: #f8f9fa;
  padding: 16px;
  box-sizing: border-box;
}

3. **响应式设计**:
如果需要，可以通过媒体查询为不同设备调整列数或其它布局细节。

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}