CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。你只需要定义一个容器元素并设置display：grid，使用grid-template-columns 和 grid-template-rows属性设置网格的列与 行的大小，然后使用grid-column 和 grid-row属性将其子元素放入网格之中。目前还处于 W3C 的工作草案之中，并且默认情况下，还不被所有的浏览器所支持。出于示例演示，建议你使用启用了特殊标志的 Chrome, Opera 或者 Firefox，现在介绍chrome浏览器开启示例功能；

可以直接在浏览器地址栏中输入网址：chrome://flags#enable-experimental-web-platform-features  立马定位需要的选项，然后点击“启用”(enable)按钮，然后重启浏览器即可。如下图：

下面是一个Grid布局的示例源码。

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

 <style>

     * {margin: 0;padding: 0;}

     html,body {width: 100%;height: 100%;}

     .container {

         display: grid;

         grid-template-columns: 33.333333% 33.333333% 33.333333%;

           grid-template-rows: auto;

     }

     .item {

         background-color: #444;

         color: #fff;

         font-size: 150%;

         padding: 20px;

         margin: 3.333333%;

     }

     .item-5 {

         grid-column-start: 2;

         grid-column-end: 4;

         grid-row-start: 2;

         grid-row-end: 4;

     }

     .item-7 {

         grid-column-start: 1;

         grid-column-end: 3;

         grid-row-start: 4;

         grid-row-end: 4;

     }

     .item-12 {

         grid-column-start: 1;

         grid-column-end: 4;

         grid-row-start: 6;

         grid-row-end: 6;

     }

 </style>

 </head>

 <body>

 <div class="container">

     <div class="item item-1">1</div>

     <div class="item item-2">2</div>

     <div class="item item-3">3</div>

     <div class="item item-4">4</div>

     <div class="item item-5">5</div>

     <div class="item item-6">6</div>

     <div class="item item-7">7</div>

     <div class="item item-8">8</div>

     <div class="item item-9">9</div>

     <div class="item item-10">10</div>

     <div class="item item-11">11</div>

     <div class="item item-12">12</div>

 </div>

 </body>

 </html>

预览效果如下：

CSS Grid layout布局的更多相关文章

  1. css grid 网格布局

    前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...

  2. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  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 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  6. CSS: Grid Layout Module

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

  7. [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 ...

  8. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  9. 各个浏览器开启CSS Grid Layout的方式

    2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...

随机推荐

  1. HTML中的转义字符

    HTML常用符号: 显示一个空格    < 小于 < <> 大于 > >& &符号 & &" 双引号 " &qu ...

  2. [转载]C# 中对html 标签过滤

    private string FilterHTML(string html) { System.Text.RegularExpressions.Regex regex1 = new System.Te ...

  3. easyui源码翻译1.32--Draggable（拖动）

    前言 使用$.fn.draggable.defaults重写默认值对象.下载该插件翻译源码 源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 --拖动 ...

  4. [wikioi]线段覆盖

    http://wikioi.com/problem/1214/ 这道题也归为贪心了.我也不是很能分辨,但想法确实是:1.有阶段最优化性:2.前一状态和后一状态有关系. 想法:1.排个序是很自然的想法, ...

  5. 关于捕获键盘信息的processDialogkey方法

    在一些控件里的keydown方法,没有办法捕获所有的按键消息 比如自己写一个窗体控件库,继承了UserControl 但是没有办法捕获一些键,比如方向键等 所以必须重载 processDialogke ...

  6. bzoj2938

    显然AC自动机,但什么叫无限生成呢?显然就是在AC自动机上匹配,出现了一个环(不能走结尾节点)直接搜索即可 ..,'] of longint; q,f:..] of longint; can,v,r: ...

  7. 微软公有云事件中心（Azure Event Hubs）在开放物联网大会（OIOT）啼声初试

     发布于 2014-12-29 作者 刘 天栋 2014年12月18日,InfoQ在京召开开放物联网大会(Open IOT Conference),微软开放技术(中国)资深项目经理陈岭在大会中针对 ...

  8. spring--JDBC的支持--7

    7.1  概述 7.1.1  JDBC回顾 传统应用程序开发中,进行JDBC编程是相当痛苦的,如下所示: java代码: 以上代码片段具有冗长.重复.容易忘记某一步骤从而导致出错.显示控制事务.显示处 ...

  9. LightOJ 1220 Mysterious Bacteria 水题

    暴力就行了,找出素因子,正的最多是30,然后负的最多是31(这一点wa了一次) #include <cstdio> #include <iostream> #include & ...

  10. LightOJ 1074 Extended Traffic SPFA 消负环

    分析:一看就是求最短路,然后用dij,果断错了一发,发现是3次方,有可能会出现负环 然后用spfa判负环,然后标记负环所有可达的点,被标记的点答案都是“?” #include<cstdio> ...