grid布局是一种新的布局方案。传统布局使用浮动和定位，而grid布局可以像表格一样将页面容器分割成一块一块的区域，定义子元素的排布和位置。可以说是flex布局的升级版。
借用大神旭哥的话：
Grid布局就像是“分田种地”。故事是这样的，pcdxlc是个程序员，省吃俭用攒了点小钱，然后老家因为城镇化建设，农村都没什么人，土地都荒废在那里，于是就承包了一块地，打算养养鱼，种种果树。承包的地方很挺大，如何划分土地就成了问题，于是pcdxlc打算借助Grid布局来划分。
对于身为码农的我们来说，种地就对了！
兼容性
Grid布局是微软在2010年提出来的一种新的布局方式，到2016年的时候提交了该布局的草案。经过近几年发展，兼容性越来越好。
引用自 Can I Use 。兼容火狐52+、谷歌57+等现代浏览器，IE10和11需要添加-ms-来实现兼容。
名词概念
Grid Container、Grid Items(网格容器、网格项)
元素应用 display: grid;即成为网格容器，它是所有网格项的父元素。
很好理解，下面这个例子，class为container的div设置了 display: grid;，container就是网格容器，里面的item都是网格项。
.container{ display: grid; }
1 2