网格

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

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

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

在下面的示例中，我创建了一个具有三列两行的 显式网格。网格上的 第三 行是一个 隐式网格 行轨道，因为有超过六个项目填充了显式轨道。

示例

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>

另请参阅