CSS grid 实现从上到下从左到右的列表布局

CSS Grid 是一种强大的二维布局系统，可以让你轻松地创建复杂而有序的网格布局。要实现从上到下、从左到右的列表布局，你可以按照以下步骤操作：

1. 首先，设置 `display` 属性为 `grid` 来激活网格布局：

.container {
  display: grid;
  /* 可选，设定网格行数 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  /* 或者设定固定列宽，如：grid-template-columns: 1fr 1fr; */
  grid-gap: 10px; /* 行间间距 */
}

2. 然后，将每个列表项作为 `grid-item` 容器：

<div class="container">
  <div class="list-item">列表项1</div>
  <div class="list-item">列表项2</div>
  <!-- ... 更多列表项 -->
</div>

3. 如果你想让元素自动填充网格直到最后一行，可以使用 `auto-fit` 和 `minmax()` 函数，它会自适应列数。

如果你想控制元素的顺序，只需保证它们的先后顺序即可。如果需要，还可以通过 `grid-auto-flow` 属性调整流向（默认是从左到右），例如 `grid-auto-flow: row dense` 会使项目按列紧密排列。