HTML5新增布局属性 display:grid;（网格布局）
网格布局的代码样式：
<style> .box{ width: 800px; height: 500px; background-color: #eee; margin: 40px auto; /* 定义网格布局 */ display: grid; /* 定义网格列数 */ grid-template-columns:100px 100px; /* 定义网格行数 */ grid-template-rows: 100px 100px; /* 整个项目在水平方向上的对齐方式 */ justify-content: center; justify-content:space-between; /* 整个项目在垂直方向上的对齐方式 */ align-content:center; align-content:space-between; /* 项目内容在水平方向上的对齐方式 */ justify-items:center; align-items:center; } .a1{ /* 单独的调整子元素的对齐方式 */ /* 水平方向 */ justify-self: flex-start; /* 垂直方向 */ align-self:flex-start; } </style> </head> <body> <div class="box"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> <div class="a4">4</div> </div> </body>
从案例中我们可以看到网格布局grid属性中能支持弹性盒布局的属性同时增加了行列属性。
（并且可以支持column-count，column-gap，column-rule等多列布局属性）
样式二：
<style> .a{ height: 500px; background-color: #eee; display: grid; grid-template-columns: 100px auto auto 100px 100px; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-gap:10px 50px; } .a1{ grid-column:1 / 5; } .a2{ grid-row-start: span 2; } </style> </head> <body> <div class="a"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> <div class="a4">4</div> <div class="a5">5</div> </div> </body>
网格布局还可以对盒子的顺序大小等值进行编改，是平面布局里最为方便的一种布局方式。
总结
网格布局的优点：
网格布局是在弹性盒布局基础上进行的改进，是属于html5新增的属性。随着移动端的日益发展，网格布局定会成为开发的重要布局之一。
网格布局的缺陷：
由于grid属性是新增属性，部分游览器及移动端暂时还不支持。
原文：https://www.cnblogs.com/houwx/p/13508723.html