Grid - 术语表编辑

了解更多

通过设置CSS属性 display: grid; 可以定义一个 CSS 网格。接着可以使用 grid-template-rows 和 grid-template-columns 属性定义网格的列属性(columns)和行属性(rows)。

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

如果开发者将内容放置在显式网格之外，或者依赖自动布局的话，网格法(grid algorithm)将需要创建额外的row或者column、 tracks 来包含显示网格之外的内容 grid items，为此将在隐式网格(implicit grid)中创建额外的轨道(tracks)。当内容添加到了已定义的tracks之外的时候，隐式网格(implicit grid)会被自动创建。

下面的例子创建了一个有两行三列的显式网格。由于超过显式网格可容纳的六个条目，此网格中的第三行将是一个隐式网格行轨道(implicit grid row track)

（注：在容器div上用 row和column定义的网格总数，等于行数乘以列数个。比如一个容器div定义了2行*3列=6个网格，这6个就是显式网格，但是假如里面有8个子div，多出来那2个就叫做隐式网格。）

* {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;
}

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

<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>