Grid布局

MDN介绍

“css grid 在2017年春季将落地与大部分浏览器” –摘自于MDN

正文:

最新的firefox版本52已经支持grid

下一版本chrome也即将要支持,大概下周或者后面

这个已经在那了,我几乎不敢相信

10年以前,当被问到css最需要什么时,我说过他需要一个真正的布局,我经常提到的一个短语是:”以layout为核心”

Rachel andrew 上周有一篇特别好的文章 Learning CSS Grid Layout ,这篇文章给出了一个比较好让你适应grid的理由,同时也破解了一些grid的神话。我强烈推荐。

我最想打破的一个关于grid的神话,从评论中总结而来(经常看到)”啊,又搞table布局”

这一句的潜台词就是:grid布局只是table布局的另外一种表达。这是非常的

所以我们可以将90年代的table布局的网页重建成grid布局,类似于使用js库或者复制的前端框架来重建一个submit按钮。这个能力并不意味着这是一个好主意

(虽然你可能会一次又一次的发现这个能力是非常有用的,我真正的意思是:虽然你可以你可以把大堆的数据放在列表形式中。但是更优的解决是放在table标签中,但是如果那不是最好的选择,grid将会提供一个潜在的解决方案)

我有个例子可以说明grid是不同于table的。上周五,我刚写完 CSS:The Definitive Guide,4th Edition,覆盖了filter,clip,blend,mask(一年以前我完成了grid章节,所以这已经是在这本书早期版本中可用了)。几乎书中所有的特性