【转载】CSS Grid!

本文转载自：众成翻译 译者：jacty 链接：http://www.zcfy.cc/article/2104 原文：http://meyerweb.com/eric/thoughts/2016/12/05/css-grid/

Grid布局来了，Grid布局来了。千真万确，各大浏览器将发布对Grid布局的支持。唔哈哈哈哈~

什么？什么？什么？你说什么？

2017年3月，Chrome和Firefox将开始默认支持Grid布局。其中，Mozilla将在3月7日发布的Firefox 52版本上开始支持。由于要先在Chrome Canary中支持Grid，所以，谷歌将在3月14号的Chrome 57版本上开始默认支持Grid.一旦在公开版本中默认得到了支持，那么当前在开发版本中的所有Grid功能都将在公开版本中出现。Grid时代就此开始。

发布日期会不会跳票？

一些奇葩的问题可能延后版本支持。发布日期因此跳票。然而，目前版本的浏览器已实装Grid的相关实现代码，当开发者们认为可以公开发布了，他们往往都会如期发布。

所以，Grid将在明年3月得到支持？

是的！

还有等多久我才能开始使用Grid? 两年还是三年？

2017年3月就可以开始使用了。所以，是大概4个月后。

但是，不会得到全局（全浏览器）支持。

圆角属性目前都尚未得到全局支持，但我相信你一定用过。

所以，你是在忽悠我？！

事实是，布局与设定元素的UI样式有所不同。如果你有着大量的IE9用户基础，把布局转到Grid，或者只用Grid,可能会有点棘手。但我相信在老浏览器上，你一定有可行的布局方案，不是么？

当然

如我之前所说，Grid将在2017年3月得到公开支持。因为任何支持Grid的浏览器都支持@supports()，所以，可以使用@supports()来为支持Grid的浏览器做Grid布局，而对于不支持Grid的浏览器使用float和inline-block结合的方式布局。之前，Jen Simmons写过一篇介绍@supports()的文章，而我写过一篇介绍如何使用它增强开发体验的短文。在使用Grid的时候也可以使用这条思路：首先使用兼容度高的布局方案，然后在@supports()中封装最新发布的布局方案。最后，逐步优化已有的布局使之接近设计稿。

对同一个页面写两套不同的布局方案似乎效率太低。

我同意这个观点。从某个角度来看，学习Grid是一种必然。那为何不选择在工作中学习它呢？ 与其占用额外时间编写与业务毫不相干的示例来学习它， 不如使用你已经理解并知道如何使用的布局方式来实践。这将使得你在工作中建立自己的一套思路，游刃有余且提升工作效率。

我不如等别人开发出一个框架出来再使用吧？

当然可以，然而需要知道的是：Jen Simmons发现 Grid其实就是一个框架。使用一个框架来抽象出另一个框架似乎毫无意义。当然，还是会有人去这么做的。 以后可能会有 Gridstraps, GAMLs 以及 1280.gses 而你有什么？ 当这些框架面世，如果你打算使用其中之一的话，你不得不花费大量时间和精力来学习使用它。我建议你投资这些时间到学习实实在在的Grid上，以便你可以建立自己的布局方案， 而不是被框架中设定的假想需求所绑架。

Grid听起来像是tables 2.0。我想大家都不会否认使用table布局是多么糟糕的一个主意吧。

使用table标签来布局的确是个糟糕的主意，尤其在它很火的那段时间。需要大量的hack来实现边框，还无法实现圆角。大家不喜欢它的原因是，任何页面都需要50KB的HTML标签和3个服务器请求， 而给一个页面完整布局的消耗是这的一百倍之多。此外，table将一切都定死在布局中，使得内容难以阅读、理解以及被搜索。大家厌恶它的原因不是它难以阅读，而是它难以阅读外还使用麻烦。

使用Grid布局，你可以使用简单、易于理解的标签，且可以任意自由得排版布局。比如，你可以将源码的最后一个元素放在布局的最前面。你可以对调页面上相邻的两个元素。不再会有诸如“如何排列这些元素以使得他们布局正确？”的难题。你按需排列他们，然后再给他们设定布局即可。这是我遇到的样式与结构分离的最佳解决方案。

不仅如此，因为CSS transform, clipping, float等属性的存在，你不需要把所有需求都交给grid布局来完成。在视觉创意上，有无限可能。你无法想象，我也无法想象。无人可以。

所以Grid解决了我们遇到的任一布局问题么？

不，目前还是存在一些小缺陷。Subgrid暂且不会发布，所以之后会出现一些类grid的布局方案，他们本应该是很简单的，但事实可能是很难甚至无法实现。比如，你不能直接对一个grid的cell或者area设定样式；所有grid的area和cell必须为矩形，所以无法创建L型的grid area。Grid的gap在指定轴上只能有一个值，非常像table中的border-spacing。

你通常想绕过这些限制，但是他们终究还是存在的，至少目前是。此外，可能会发现一些bug。如果不是bug，则可能是文档未能述及的一些使用场景。但有很多人已经很努力得查找bug和为各种使用场景提供支持了。这是固定流程以使grid进入到目前这个公开发布的状态。

如果火狐和Chrome延迟一个或者两个版本支持Grid，而其他浏览器按时支持了，怎么办？

这种情况下，需要更长的一段时间来使得你封装在@supports()中的Grid被这些延迟支持的浏览器认识。不是什么大问题。这种方法对MS Edge同样奏效。Edge尽管是第一家使用私有后缀解析Grid的浏览器，然而，它目前还是不认识Grid语法。一旦Edge开始能够解析Grid的新语法和新行为后，你的CSS就能开始正常工作了。火狐和Chrome等其他浏览器也是如此。

好吧，那么我该去哪里学习Grid？

网上有许多好的资源，以后会有更多的。如下是目前一些优质的学习资料：

• Grid中文教程
• The Experimental Layout Lab of Jen Simmons
• Grid By Example
• A Complete Guide to Grid
• CSS Grid Layout specification

但是，记住！在2017年3月前，你访问如上这些网站，你需要确认你的浏览器已经打开了Grid支持的标志，以便其中的示例能够运行。Igalia在开启CSS Grid布局中对此有所介绍，而Rachel在中一个浏览器页面有更深入的探讨。

以前总是被布局问题所困扰，现在恐怕不会了

是的，是的，我能感同身受。但现实就是这样的，Grid来了。 开始准备吧。air max 90 essential purple