网格单元格

CSS 网格布局中,网格单元格是 CSS 网格上能拥有的最小单位。它是四条交叉的 网格线之间的空间,概念上非常像一个表格单元格。

Diagram showing an individual cell on the grid.

如果您不使用其中一种网格放置方法来放置项目,网格容器的直接子项将由自动放置算法一个一个地放置到每个单独的网格单元格中。将创建额外的行或列 轨道,以创建足够的单元格来容纳所有项目。

示例

在该示例中,我们创建了一个三列轨道的网格。这五个项目按顺序放置到网格单元格中,首先在初始的一行三个网格单元格中放置,然后为剩余的两个项目创建新的一行。

css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

另见

属性参考

延伸阅读