网格

通过设置 CSS 属性 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>

参见