1. Grid lines(网格线)、Grid column（列）和Grid row（行）
   通过grid-template-columns可以将网格分成指定大小的几列，其值可以是：具体的长度（px、rem）、百分比长度（%）、fr、repeat等（具体可参见grid-template-columns - CSS（层叠样式表） | MDN）。

   grid-template-rows与grid-template-columns类似，它是将网格分成指定大小的几行，两者结合起来就将一块区域划分成指定大小的网格。
   如下面的例子：

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

grid-template-columns将wrapper划分成等大的3列（fr是flex单位，会将剩余的区域等比例划分），grid-template-rows将wrapper划分成为两个100px高的行，划分之后就产生了3条水平的网格线和4条垂直的网格线（编号从1开始），网格线的编号可以用于指定每个元素在网格中的范围。

grid-template是grid-template-rows和grid-template-columns的缩写，其中间用/分隔，例如上面的CSS可以简写为：

.wrapper {
  display: grid;
  grid-template: 100px 100px / repeat(3, 1fr);
}

2. grid-column和grid-row
   gird-column是grid-column-start和grid-column-end的简写，其分别用于指定元素在网格中的所占的列的起始和结束，中间同样使用/分隔，例如我们给上面的CSS加一点内容：

.wrapper {
  display: grid;
	grid-template: 100px 100px / repeat(3, 1fr);
  background: #ffd7a4;
  border: 3px solid #ff680e;
}

.wrapper div {
  border: 3px solid #ffa43f;
  border-radius: 5px;
}

.wrapper :nth-child(1) {
  grid-column: 1 / 3;
}

我们给wrapper的第一个字元素加上了grid-column，指定第一个元素是用第一条垂直的网格线开始到第三条垂直的网格线结束。

除了指定开始/结束的网格线的编号，grid-column-start和grid-column-end还可以用于指定元素所占的列数，以此可以通过指定其中一个的具体网格线，另一个即可用span width相对于其定位，例如上面的css可以改为：

.wrapper :nth-child(1) {
  grid-column: 1 / span 2;
}	

同时编号还可以为负数，为负数时指定的是倒数第n条网格线，例如上面的css可以改为：

.wrapper :nth-child(1) {
  grid-column: -4 / span 2;
}

3. grid-area
   grid-area一方面可以配合grid-template-areas使用，先使用grid-template-areas将网格划分为不同的区域，然后使用grid-area指定元素所在的区域；另一方面可以直接按顺序指定grid-row-start、grid-column-start、grid-row-end和grid-column-end，例如我们更改一下是上面的css：

.wrapper :nth-child(1) {
  grid-area: 1 / 1 / 3 / 3;
}

其效果如下：

这里第一个div占掉了4个网格单元，第二个div和第三个div占掉了两个，划分出的6个div就全部占掉了，所以网格容器会再创建隐式网格去放置剩余的两个元素，之所以叫隐式网格是因为它无法使用网格线编号去指定，不过我们通过grid-auto-columns、grid-auto-flow和grid-auto-rows去指定隐式创建的网格的宽度、排列顺序和高度，具体可以参见grid-auto-columns 、 grid-auto-flow 和 grid-auto-rows
4. grid-gap
grid-gap用于指定列/行之间的间距，具体可以参见grid-gap

最后留一个小游戏可以在学习之后尝试Grid Garden - A game for learning to layout elements within rows and columns with CSS grid

# CSS # 前端