2017年3月，Chrome、Firefox将开启默认支持。

当然对于很多人等不及浏览器默认支持，想提前体验一把，这里提供一些打开方式：

1、Chrome

在浏览器中输入：chrome://flags/#enable-experimental-web-platform-features

然后，对第一个实验性网络平台功能，点击启用。

然后重启浏览器，然后便能体验到了。

2、Opera

在浏览器中输入：opera://flags/#enable-experimental-web-platform-features

然后，对第一个Enable experimental Web Platform features，点击启用

同样，重启浏览器

3、safari

在safari TP版本以及WebKit Nightly中可以使用。不过比较麻烦，需要OS10.12以上。

启用方式：Develop > Expermiental Features > CSS Grid

4、firefox

在浏览器中输入：about:config

然后，输入layout.css.grid，双击即可激活。

同样，重启浏览器

各个浏览器开启CSS Grid Layout的方式的更多相关文章

  1. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  2. [CSS] Get up and running with CSS Grid Layout

    We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...

  3. CSS Grid Layout In Action

    CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...

  4. css grid layout in practice

    css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...

  5. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

  6. CSS grid layout

      CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小.位置和图层之间的关系. 像表格一样,网格布局让我们能够按行或列来对齐元素. 但是,使用CSS网格可能还是比CSS表格更容 ...

  7. CSS grid layout demo 网格布局实例

    直接 上代码,里面我加注释,相当的简单, 也可以去我的github上直接下载代码,顺手给个星:https://github.com/yurizhang/micro-finance-admin-syst ...

  8. 关于CSS Grid Layout的代码解释

    .wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1 ...

  9. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

随机推荐

  1. 【HighCharts系列教程】二、Highcharts结构及API文档

    一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...

  2. bootstrap建立响应式网站——tab选项卡

    1.bootstrap给我们提供了标签页 细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解.其实说来也简单,以前自己写js和css时没有意识到整体的划分.就是分为两部分:一部分 ...

  3. js优化与注意点

    1.使用尽可能少的全局变量.尽量用var来声明变量,避免隐式使用全局变量. 隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力. 通过var创建的全局变量(任 ...

  4. jar2exe 配置jre

    http://www.regexlab.com/zh/jar2exe/support.htm

  5. javascript技巧大全套

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  6. hbuilder 手机app开发系列（一）

    最佳答案好水啊,实在看不过眼,首先apicloud是一个框架,hbuidler是ide工具,两者没什么可比性.我来推荐一个国外免费开源的项目吧,Ionic framework,我之所以推荐它是因为它支 ...

  7. html-div-css

    用CSS实现拉动滚动条时固定网页背景不动   body{        background-image: url(./inc/bgbk.jpg);        background-attachm ...

  8. 结对编程--Goldpoint Game

    黄金点游戏 黄金点游戏描述: N个同学(N通常大于10),每人写一个0~100之间的有理数 (不包括0或100),交给裁判,裁判算出所有数字的平均值,然后乘以0.618(所谓黄金分割常数),得到G值. ...

  9. memcache数据组织

    转自:原链接 使用命令 set(key, value) 向 memcached 插入一条数据, memcached 内部是如何组织数据呢 一 把数据组装成 item memcached 接受到客户端的 ...

  10. laravel memcached使用

    当第一次使用cache时,想用 memcached 的方式,但是它直接报错: 说明你的php没安装 memcached 这个扩展,在ubuntu下直接 sudo apt-get install mem ...