相信大家都比较熟悉flex布局了，最近有空研究了波grid布局，感觉虽然兼容性还不是太高，应用不是太普遍，但是功能非常强大。未来应该是grid+flex为主流，grid是二维布局，很灵活，适合整体构架，而flex是一维布局，适合处理局部细节。
介绍CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox 那样主要是一维系统。
兼容性目前不是太友好
和felx类似，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项目 的全部属性
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
被吓到了吗，反正第一次我看是被吓到了，不过没事，下面只会讲解其中常用的
下面栗子均用.grid_box，.grid_item分别指代容器和项目，并使用以下html结构
<div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </div> <span>邻居元素</span> 容器属性 displaygrid - 生成一个块级(block-level)网格
inline-grid - 生成一个行级(inline-level)网格
subgrid - 如果容器本身就是一个项目，就可以使用这个属性来表示你想从它的父节点获取它的行/列的大小，而不是指定它自己的大小。
.grid_box { background: #054154; display: inline-grid; //行级网络，和span处于一行 } .grid_item { background: #0490db; border: 1px solid #fff; } .grid_box { background: #054154; display: grid; //块级网络，将span挤入下一行 } .grid_item { background: #0490db; border: 1px solid #fff; } grid-template-columns / grid-template-rowsgrid-template-rows是行高
.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; } .grid_item { background: #0490db; border: 1px solid #fff; }代表第一行高60px，第三行高40px,其他的所有行（不设置或者auto的行）平分剩余高度
grid-template-columns是列宽
.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px auto auto; } .grid_item { background: #0490db; border: 1px solid #fff; }和行高类似，这个代表第一列宽30px,第二列宽20px，第三列第四列平分剩余宽度（和行高不同的是列宽是你设置了多少就会有多少列，列数量和你设置的是相同的）
grid-gap【grid-gap】默认值为0，两个属性的缩写，第一个grid-row-gap（行与行之间的间距），第二个grid-column-gap（列与列之间的间距）,只设置了一个值，表示行和列的间距相等*/
.grid_box { background: #054154; width: 500px; height: 300px; display: grid; grid-template-rows: 60px auto 40px; grid-template-columns: 30px 20px repeat(2,1fr); grid-gap: 2px 4px; //行间距2px,列间距4px } .grid_item { background: #0490db; border: 1px solid #fff; } 一些语法糖 repeat你可能会问如果中间有很多列/行，每个都写岂不是很麻烦，因此提供了repeat语法糖来简化写法
.grid_box { grid-template-columns: 30px 20px auto auto; grid-template-columns: 30px 20px repeat(2,auto);//等价于 } fr另外，类似flex的1，grid里面也有类似的'份数单位'---fr.
.grid_box { grid-template-columns: 30px 20px auto auto; grid-template-columns: 30px 20px 1fr 1fr;//等价于 grid-template-columns: 30px 20px repeat(2,1fr);//也等价于 } minmax最大值最小值
grid-template-rows: minmax(auto, 30%) 1fr 1fr;表示第一行高最小auto,最大30%