这篇文章主要介绍“如何用CSS Grid布局使浏览器开启CSS Grid Layout”，在日常操作中，相信很多人在如何用CSS Grid布局使浏览器开启CSS Grid Layout问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用CSS Grid布局使浏览器开启CSS Grid Layout”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

按需策划设计可以根据自己的需求进行定制，成都做网站、成都网站制作构思过程中功能建设理应排到主要部位公司成都做网站、成都网站制作的运用实际效果公司网站制作网站建立与制做的实际意义

浏览器兼容性

先来回忆一下几大主流浏览器对CSS Grid Layout模块的支持达到什么样的程度：

从上图不做过多阐述，可以说是一目了然，不过值得欣慰的是，一直不给力的IE，这回却给力了一回，从IE10版本就默认开启了CSS Grid Layout的模块功能。

开启浏览器的CSS Grid Layout模块功能

到目前几大主流浏览器主要包括：

Chrome Safari Internet Explorer Opera Firefox

当然，喜欢追求新东西的同学，还会观注：

Chrome CanaryWebkit NightlyOpera NextFirefox Aurora

除了IE10+默认支持CSS Grid Layout模块功能之外，其他的浏览器Chrome、Safari、Opera和Firefox都需要重新设置（启用开发中的实验性网络平台功能）。

Chrome浏览器

在写这篇文章的时候，我使用的Chrome浏览器版本是“Chrome 38.0.2125.101”。在Chrome浏览器中开启CSS Grid Layout模块功能比较简单，只需要在您的浏览器地址栏中输入：chrome://flags，回车后在列表清单中找到“启用实验性网络平台功能”（#enable-experimental-web-platform-features），一个更为简单的方法，可以直接在浏览器地址栏中输入网址：chrome://flags#enable-experimental-web-platform-features立马定位需要的选项，然后点击“启用”(enable)按钮，如下图所示：

开启之后，记得重启您的浏览器。为了难您已开启成功，你可以在你的浏览器中打开这个Demo。如果您能看到类似下图的效果，表示已开启成功，可以做CSS Grid Layout相关的学习和演示。

Opera浏览器

Opera浏览器开启CSS Grid Layout的方法和Chrome是一样的。在Opera浏览器网址栏中输入opera://flags，并且找到##Enable experimental Web Platform features（或者直接输入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浏览器

非常遗憾，直到目前为止，我还没有找到如何在Firefox浏览器中开启CSS Grid Layout模块。如果您知道如何在Firefox浏览器中开启相关功能，还请多多指点。

到此，关于“如何用CSS Grid布局使浏览器开启CSS Grid Layout”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

网站名称：如何用CSSGrid布局使浏览器开启CSSGridLayout-创新互联
网站路径：http://myzitong.com/article/ispig.html