CSS Grid布局教程之浏览器开启CSS Grid Layout汇总

在上一篇文章《CSS Grid布局教程之什么是网格布局》中，我们简要介绍了CSS Grid Layout及其相关概念和术语，为后续的深入学习与应用奠定了基础。由于各浏览器对CSS Grid Layout的支持程度不尽相同，全面应用尚需时日，甚至在学习制作测试示例时，也需要进行一些特别设置。那么，将指导大家如何让自己的浏览器支持CSS Grid Layout模块功能。

让我们关注各大浏览器对CSS Grid Layout模块的支持情况：

从图中可以清晰地看到，虽然各大浏览器支持情况有所不同，但令人欣慰的是，IE浏览器从IE10版本开始，已经默认支持了CSS Grid Layout模块功能。

而对于Chrome、Safari、Opera等浏览器，若要启用CSS Grid Layout模块功能，需要进行一些特别设置。以下是如何在主流浏览器中进行设置的步骤：

Chrome浏览器：

在写这篇文章时，我所使用的Chrome浏览器版本是“Chrome 38.0.2125.101”。启用CSS Grid Layout模块功能非常简单，只需在浏览器地址栏中输入：chrome://flags，然后查找“启用实验性网络平台功能”（enable-experimental-web-platform-features）。更为便捷的方式是，直接输入：chrome://flagsenable-experimental-web-platform-features，快速定位并启用该选项。

Opera浏览器：

Opera浏览器的设置方法与Chrome相同。在Opera的栏中输入opera://flags，然后找到并启用“Enable experimental Web Platform features”。

重启浏览器后，CSS Grid Layout功能即可生效。

（注：测试的Opera版本为“Opera25.0.1614.50”。）

Safari(Webkit)浏览器：

从2014年4月2日起，Webkit Nightly已默认内置了CSS Grid Layout模块功能。

遗憾的是，对于Firefox浏览器，我们暂时还无法启用CSS Grid Layout模块。如果您知道如何操作，还请不吝赐教。

虽然Firefox尚未默认支持CSS Grid Layout，但我们仍有IE10+、Chrome、Opera和Webkit Nightly等浏览器可供选择，进行相关的演示与测试。在接下来的教程中，我们将学习如何使用CSS Grid Layout进行布局设计。希望大家能够喜欢并熟练掌握这一强大的布局工具。

那么，让我们在后续的教程中，一起CSS Grid Layout的奥秘，共同领略其带来的布局革命吧！