Grid布局（网格布局），是一个二维系统，这就意味着它同时可以处理行和列。可以通过css规则应用于父元素和子元素，来实现网格布局。
兼容性
从图中我们可以看到，就目前来说，grid布局的支持还是较差的，IE只在11支持，chrome在57开始支持，iphone手机端10.3才开始支持，Safari 11支持。虽然就目前而言，有部分不支持grid布局，但是也可以看出，就移动端而言，目前大部分年轻人目前使用的手机和主流手机都是支持，所以在生产环境中使用grid布局只是时间问题。
Grid 属性列表
Grid Container 的全部属性
- display
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- justify-content
- align-content
- grid-auto-columns
- grid-auto-rows
- grid-auto-flow
- grid
Grid Items 的全部属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
父容器(Grid Container)的属性
首先在父元素上设置display：grid；这样里面所有的子元素都要遵循grid的布局规则，看下面的例子
One
Two
Three
Four
Five
Six
我们很容易通过css来知道页面长什么样子
grid-template-columns:200px 100px 200px;设置了列,每一列的宽带分别向对应，第一列200px，第二列100px；第三列200px；
同理，行也是一样，grid-template-rows设置了第一行高是100px，第二行高200px，这样就组成上面的样子，感觉是不是和table表格一样？
grid-template-columns / grid-template-rows
使用以空格分隔的多个值来定义网格的列和行。这些值表示轨道大小(track size)，它们之间的空格代表表格线(grid line)。
.container {
grid-template-columns: ... | ...;
grid-template-rows: ... | ...;
}
(如果未显示的给网格线命名)，轨道值之间仅仅有空格时，网格线会被自动分配数字名称：
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
但你可以给网格线指定确切的命名。 注意中括号里的网格线命名语法：
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
需要注意的是，一个网格线可以有不止一个名字。例如，这里第2条网格线有两个名字：row1-end 和 row2-start：
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
如果你的定义中包含重复的部分，则可以使用repeat() 符号来简化写法：
.container {
grid-template-columns: repeat(3, 20px [col-start]) 5%;
}
上面的写法和下面等价：
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
}
fr 单位允许您将轨道大小设置为网格容器自由空间的一部分。 例如，下面的代码会将每个 grid item 为 grid container 宽度的三分之一：
.container {
grid-template-columns: 1fr 1fr 1fr;
}
自由空间是在排除所有不可伸缩的 grid item 之后计算得到的。 在下面的示例中，fr单位可用的自由空间总量不包括50px:
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas
通过引用 grid-area属性指定的网格区域的名称来定义网格模板。 重复网格区域的名称导致内容扩展到这些单元格。 点号表示一个空单元格。 语法本身提供了网格结构的可视化。
值：
- 使用 grid-area 属性设置的网格区域的名称 - . - 点号代表一个空网格单元
- none - 没有定义网格区域
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display:grid;
grid-template-columns: 100px 40px 40px 120px;/*列宽*/
grid-template-rows: 100px 60px 30px; /*行高*/
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
grid-gap:10px 10px;
}
这将创建一个四列宽三行高的网格。 整个第一行将由 header 区域组成。 中间一行将由两个 main 区域、一个空单元格和一个 sidebar 区域组成。 最后一行是footer区域组成。
grid-column-gap / grid-row-gap
指定网格线的大小，你可以把它想象为设置列/行之间的间距的宽度。
值：
- line-size - 一个长度值
.container {
grid-column-gap: ;
grid-row-gap: ;
}
只能在列/行之间创建缝隙，而不是在外部边缘创建。
align-items
沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。
值：
- start: 内容与网格区域的顶端对齐
- end: 内容与网格区域的底部对齐
- center: 内容位于网格区域的垂直中心位置
- stretch: 内容高度占据整个网格区域空间(这是默认值)
.container {
align-items: start | end | center | stretch;
}
也可以通过给单个 grid item 设置align-self属性来达到上述效果。
.item-a {
grid-area: header;
background: #ccc;
align-self: center;
}
justify-content
有时，网格的总大小可能小于其网格容器的大小。如果你的所有 grid items 都使用像px这样的非弹性单位来设置大小，则可能发生这种情况。此时，你可以设置网格容器内的网格的对齐方式。 此属性沿着行轴对齐网格（与之对应的是 align-content, 沿着列轴对齐）。
值：
- start - 网格与网格容器的左边对齐
- end - 网格与网格容器的右边对齐
- center - 网格与网格容器的中间对齐
- stretch - 调整g rid item 的大小，让宽度填充整个网格容器
- space-around - 在 grid item 之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
- space-between - 在 grid item 之间设置均等宽度空白间隙，其外边缘无间隙
- space-evenly - 在每个 grid item 之间设置均等宽度的空白间隙，包括外边缘
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
举例：
.container {
justify-content:center;
}
/*等同于margin:0 auto;
实现水平居中
*/
本文摘自饥人谷若愚老师,grid布局一文,侵权即删.
附几个demo
demo1
demo2