网格

CSS 网格是使用 display 属性的 grid 值定义的；您可以使用 grid-template-rows 和 grid-template-columns 属性来定义网格的列和行。

您使用这些属性定义的网格称为显式网格。

如果您将内容放置在该显式网格之外，或者您依赖自动放置并且网格算法需要创建额外的行或列轨道来容纳网格单元格，则会在隐式网格中创建额外的轨道。隐式网格是由于添加了超出已定义轨道的其他内容而自动创建的网格。

在下面的示例中，我创建了一个包含三列两行的显式网格。网格中的第三行是一个隐式网格行轨道，这是由于网格中有超过六个项目填满了显式轨道而形成的。

示例

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

html

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
</div>

另见

网格布局的基本概念
属性参考

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025 年 7 月 11 日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题