大连话校园系列,王牌大明星刘德华,2008年3月14日
上一篇《css grid布局教程之什么是网格布局》中简单介绍了什么是css grid layout以及一些概念和术语，为后续学习和使用css grid layout做了一些铺垫。但浏览器对css grid layout到目前为止各浏览器厂端支持程度不一致，致使无法全面使用，就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中，将向大家介绍如何让自己的浏览器支持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浏览器开启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 layout模块，并且介绍了如何在chrome和opera浏览器中开始css grid layout模块。当然还有一些遗憾，至今还没有找到如何在firefox中开启类似功能的方法。不过不用担心，到目前为止，我们至少有四种不同的浏览器（ie10+、chrome、opera和webkit nightly）可以做相关的演示与测试。
那么在接下来的教程，我们就可以开始学习如何使用css grid layout来布局。希望大家会喜欢。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
我要评论
网友评论