[TOC] # 简介 CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是这些方法本质上是hack，遗漏了很多功能，例如[垂直居中](http://www.w3cplus.com/blog/tags/357.html)。后来出了flexbox(盒子布局)，解决了很多布局问题，但是它仅仅是一维布局，而不是复杂的二维布局，实际上它们（flexbox与grid）能很好的配合使用。Grid布局是第一个专门为解决布局问题而创建的CSS模块，由微软提出，在IE10开始支持，但需要使用`-ms-`后缀（IE11+不再需要）。2012年11月06日成立草案。 ## [兼容性](http://caniuse.com/#search=grid) **目前浏览器还不支持Grid布局（所以现在的grid支持很渣，不能实际项目）**，IE10和IE11支持老的语法。 如果你想体验Grid布局的强大，推荐使用开通过“体验新功能”的Chrome, Opera 或 Firefox， 1. Chrome:打开浏览器，输入`chrome://flags`，找到"experimental web platform features"，启用并重启浏览器； 2. Opera：输入`opera://flags`，与Chrome一样；Firefox:输入`layout.css.grid.enabled`。 (Grid 布局正在被各大浏览器逐步支持～，未来会越来越好) # 视频 Wes Bos的 https://cssgrid.io/ ## 参考 [CSS Grid 布局完全指南(图解 Grid 详细教程)](http://www.css88.com/archives/8510) https://css-tricks.com/almanac/properties/g/grid-row-column/