翻译正在进行中。

通过设置 display: grid;  可以定义一个 CSS 网格。然后使用 grid-template-rowsgrid-template-columns 属性来定义网格的 columns 和 rows。

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

如果你把内容放在这个explicit grid之外,或者如果你依赖auto-placement和grid algorithm需要创建额外的row或者column  tracks 去控制 grid items,那么将在 implicit grid 中创建额外的tracks。由于将内容添加到tracks的定义之外,implicit grid会被自动创建。

在下面的例子中,我创建了一个有三列两行的explicit grid。由于超过explicit tracks可容纳的六个条目,在网格中的第三行是一个implicit grid row track。

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

了解更多

属性参考

扩展阅读

文档标签和贡献者

标签: 
 此页面的贡献者: Wendy1994, GHLandy, maicss, QizhongFang
 最后编辑者: Wendy1994,