CSS Grid布局：浏览器开启CSS Grid Layout

hightopo 发布于2019-08-28 18:03 / 2648人阅读

摘要：浏览器浏览器开启的方法和是一样的。浏览器非常遗憾，直到目前为止，我还没有找到如何在浏览器中开启模块。如果您知道如何在浏览器中开启相关功能，还请多多指点。不过不用担心，到目前为止，我们至少有四种不同的浏览器和可以做相关的演示与测试。

上一篇《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 Canary

Webkit Nightly

Opera Next

Firefox 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 Layout模块，并且介绍了如何在Chrome和Opera浏览器中开始CSS Grid Layout模块。当然还有一些遗憾，至今还没有找到如何在Firefox中开启类似功能的方法。不过不用担心，到目前为止，我们至少有四种不同的浏览器（IE10+、Chrome、Opera和Webkit Nightly）可以做相关的演示与测试。

那么在接下来的教程，我们就可以开始学习如何使用CSS Grid Layout来布局。希望大家会喜欢。

via W3CPlus

GPU云服务器云服务器 css布局 css布局教程学习css布局 Grid

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110980.html

CSS Grid布局：什么是网格布局

摘要：网格单元格网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。图中突出显示的网格区域是行线和列线之间的区域，其主要包括了四个网格单元格。 CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Gr...

xiaoqibTn 2019-08-28 18:03 评论0 收藏0
CSS Grid布局：网格单元格布局

摘要：基于网格线的占位区网格中的单元格是有网格线划分出来的，那么在网格布局中，同样可以使用网格线来给子元素设置占位区域。也就是说这四条网格线间的区域是一个单元格。 CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局：什么是网格布局》和《[CSS Grid布局：浏览器开启CSS Grid Layout]ht...

maxmin 2019-08-28 18:03 评论0 收藏0
(译)原生CSS网格布局学习笔记

摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...

v1 2019-08-02 15:56 评论0 收藏0
(译)原生CSS网格布局学习笔记

摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...

Warren 2019-08-30 13:10 评论0 收藏0
瀑布流插件Masonry中文文档【翻译】

摘要：本位为官方文档翻译，原始链接安装下载下载压缩或未压缩的压缩未压缩在直接饮用文件。排列未加载完成的图片时会导致元素的重叠，可以解决这个问题。布局组件尺寸尺寸配置项和可以可以设置组件的列宽和间距。增加移除控件在瀑布流末尾增加新控件并重排。本位为Masonry官方文档翻译，原始链接安装Install 下载下载压缩或未压缩的masonry masonry.pkgd.min.js （压缩...

soasme 2019-08-22 15:18 评论0 收藏0