基本例子

CSS Grid 被定义为显示属性。它仅适用于父元素及其直接子元素。

考虑以下标记：

<section class="container">
  <div class="item1">item1</div>
  <div class="item2">item2</div>
  <div class="item3">item3</div>
  <div class="item4">item4</div>
</section>

将上面的标记结构定义为网格的最简单方法是将其 display 属性设置为 grid：

.container {
  display: grid;   
}

但是，这样做总会导致所有子元素在彼此之上崩溃。这是因为孩子们目前不知道如何在网格中定位自己。但我们可以明确告诉他们。

首先，我们需要告诉网格元素 .container 将构成其结构的行数和列数，我们可以使用 grid-columns 和 grid-rows 属性来做到这一点（注意复数）：

.container {
  display: grid;
  grid-columns: 50px 50px 50px;
  grid-rows: 50px 50px;
}

但是，这对我们来说仍然没有多大帮助，因为我们需要为每个子元素命令。我们可以通过指定 grid-row 和 grid-column 值来实现这一点，这些值将告诉它它在网格中的位置：

.container .item1 {
  grid-column: 1;
  grid-row: 1;
}
.container .item2 {
  grid-column: 2;
  grid-row: 1;
}
.container .item3 {
  grid-column: 1;
  grid-row: 2;
}
.container .item4 {
  grid-column: 2;
  grid-row: 2;
}

通过为每个项目提供列和行值，它标识容器中的项目顺序。

在 JSFiddle 上查看一个工作示例。你需要在 IE10，IE11 或 Edge 中查看此内容才能使其正常工作，因为这些是目前唯一支持网格布局的浏览器（带有供应商前缀 -ms-）或根据 caniuse 在 Chrome，Opera 和 Firefox 中启用标记以便测试跟他们。