网格系统 CSS Grid Layout1

CSS网格（CSS Grid）布局入门

CSS网格布局是浏览器Flexbox布局之后最重要的布局方式。我们可以忘记过去15年经常使用的的各种“神奇数字”，hacks和一系列变通布局方案。网格布局提供了非常简单的声明布局方式，之后再也不需要借助一些常见的主流css框架，也能减少很多手动实现的布局方式

如果你以前不熟悉CSS网格布局，那么你可以开始了解它了。它是一种适用于容器元素，并能指定子元素的间距、大小和对齐方式的布局工具。

CSS网格布局赋予我们更强大的能力——大家熟悉的水平垂直居中布局，不需要增加标签就能做到。同样，这也能让我们不需要媒体查询就能根据可用空间自动适应。

浏览器兼容性

CSS网格布局从Safari 10.1, Firefox 52, Opera 44, Chrome 57开始收到支持，微软Edge在Edge 15会更新对网格布局的支持。

微软的浏览器（IE10–11和Edge 13-14）有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。

创建带有间距（gutter）的两列（column）网格

使用grid-template-columns 和 grid-gap创建带间距的两列布局

为了创建上述网格布局，我们需要使用 grid-template-columns和 grid-gap。
grid-template-columns表示网格中的列是如何布局的，它的值是一连串以空格分割的的值，这些值标识每列的大小，值的个数表示列的数目。

例如，四列250px宽度的网格布局可以这样表示：

`grid-template-columns: 250px 250px 250px 250px;`

也可以使用repeat关键字表示：

  grid-template-columns: repeat(4, 250px);

定义间距

grid-gap定义了网格布局的间距大小，接收一个或两个值，如果定义两个值则表示列（column）和行（row）的间距大小。

*在两列布局示例中，我们可以如下使用： *

 `.grid {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-gap: 1rem;
}`

不幸的是，这个间距将会占用容器元素的整体宽度，计算出来就是100vw + 1rem，最终这个布局会导致出现水平滚动条。

viewport导致的水平滚动条

内容对齐

为了对齐示例中的内容，我们在子元素上使用grid布局，并加上对齐属性来定位他们到指定轨道(track)，轨道就是一个网格的列或行的某个位置的常见的名称。网格跟Flex布局一样，有一系列对齐的属性——共有四种值——start, center, end, 和stretch，分别对应其子元素所在的轨道。stretch跟其他不太一样，它会将元素从所在轨道的头拉伸到尾。

align-items 和 justify-content