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

1、grid布局教程之浏览器开启css上一篇css grid布局教程之什么是网格布局中容易介绍了什么是css grid layout以及一些概念和术语，为后续学习和用法css grid layout做了一些铺垫。但扫瞄器对css grid layout到目前为止各扫瞄器厂端支持程度不全都，致使无法全面用法，就算是学习做一些测试示例都还需要做一些设置。那么在这篇文章中，将向大家介绍如何让自己的扫瞄器支持css grid layout模块功能。扫瞄器兼容性先往返忆一下几大主流扫瞄器对css grid layout模块的支持达到什么样的程度： 从上图不做过多阐述，可以说是一目了然，不过值得欣慰的是，向来

2、不给力的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都需要重新设置（启用开发中的试验性网络平台功能）。chro

3、me扫瞄器在写这篇文章的时候，我用法的chrome扫瞄器版本是chrome 38.0.2125.101。在chrome扫瞄器中开启css grid layout模块功能比较容易，只需要在您的扫瞄器地址栏中输入：chrome:/flags，回车后在列表清单中找到启用试验性网络平台功能（enable-experimental-web-platform-features），一个更为容易的办法，可以挺直在扫瞄器地址栏中输入网址：chrome:/flagsenable-experimental-web-platform-features立马定位需要的选项，然后点击启用(enable)按钮，如下图所示：开

4、启之后，记得重启您的扫瞄器。为了难您已开启胜利，你可以在你的扫瞄器中打开这个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 gr

5、id 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和webki