0x007-grid布局

https://jsfiddle.net/chuangchen/gnjb7wpq/153/

grid-template-columns和grid-template-rows ​

这两个属性定义了网格每行每列的大小。本例使用了一种新单位fr，代表每一列（或每一行）的分数单位（fraction unit）。这个单位跟Flexbox中flex-grow因子的表现一样。grid-template-columns:1fr 1fr 1fr表示三列等宽。

https://jsfiddle.net/chuangchen/gnjb7wpq/163/

不一定非得用分数单位，可以使用其他的单位，比如px、em或百分数。也可以混搭这几种单位，例如，grid-template-columns: 300px 1fr定义了一个固定宽度为300px的列，后面跟着一个会填满剩余可用空间的列。2fr的列宽是1fr的两倍。

grid-gap: 1em 2em; 表示水平方向间距为2em，垂直方向为1em。

更多示例 ​

nav {
  /*从1号垂直网格线跨越到3号垂直网格线*/
  grid-column: 1 / 3;
  /*
  该网格项将跨越一个网格行。span 表示所要跨越的网格数量。
  */
  grid-row: span 1;
}

.main {
  grid-column: 1 / 2;
  /* 元素起始于第3条水平网格线，结束于第5条水平网格线*/
  grid-row: 3 / 5;
}

nav {
  /*从1号垂直网格线跨越到3号垂直网格线*/
  grid-column: 1 / 3;
  /*
  该网格项将跨越一个网格行。span 表示所要跨越的网格数量。
  */
  grid-row: span 1;
}

.main {
  grid-column: 1 / 2;
  /* 元素起始于第3条水平网格线，结束于第5条水平网格线*/
  grid-row: 3 / 5;
}

在线代码示例：

https://jsfiddle.net/chuangchen/gnjb7wpq/325/

flex布局和grid布局的差异 ​

• Flexbox本质上是一维的，而网格是二维的。
• Flexbox是以内容为切入点由内向外工作的，而网格是以布局为切入点从外向内工作的。