这里有两件事情启发我创建本指南。

第一个是RachelAndrew的令人敬畏的书为CSSGrid布局做好准备。

这本书很详尽明确的的介绍了Grid,如果你想很好的掌握Grid的基础知识,我强烈建议你去购买。

另外一个很大的灵感来自于ChrisCoyier的Flexbox完整指南,这本书是我了解Flebox的一个很优秀的资源。

这里,我还想补充一句,当你使用谷歌搜索flexbox时,会出现很多类似的资源,但是为什么不直接利用最好的资源呢?

我书写此指南的目的是基于目前最新版本,规范其网格概念。

所以我不会再次提及过时的IE语法,并且随着规范的成熟,我会尽力定期更新此指南。

基础知识与浏览器支持

Grid的入门是很容易的。

你只需要定义一个容器元素并设置display:grid,使用grid-template-columns和grid-template-rows属性设置网格的列与行的大小,然后使用grid-column和grid-row属性将其子元素放入网格之中。

与flexbox类似,网格项的源顺序无关紧要。

为了更好地使你的网格与媒体查询相结合使用,你可以在CSS中任意放置。

想象一下你定义的整个页面布局,然后如果想要完全重新布局以适应不同的屏幕宽度,这时仅仅使用几行CSS代码就可以实现。

Grid是曾经介绍过的最强大CSS模块之一。

关于Grid一件很重要的事情就是它现在还不适用于项目使用。

目前还处于W3C的工作草案之中,并且默认情况下,还不被所有的浏览器所支持。

InternetExplorer10和11已经可以实现支持,但也是利用一种过时的语法实现的。

现在出于示例演示,我建议你使用启用了特殊标志的Chrome,Opera或者Firefox。

在Chrome,导航到chrome://flags并启用web实验平台功能。

该方法同样适用于Opera(opera://flags)。

在Firefox中,启用layout。

css。

grid。

enabled标志。