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布局的示例源码。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 6 <style>
 7     * {margin: 0;padding: 0;}
 8     html,body {width: 100%;height: 100%;}
 9     .container {10         display: grid;
11         grid-template-columns: 33.333333% 33.333333% 33.333333%;
12           grid-template-rows: auto;
13     }
14     .item {15         background-color: #444;
16         color: #fff;
17         font-size: 150%;
18         padding: 20px;
19         margin: 3.333333%;
20     }
21     .item-5 {22         grid-column-start: 2;
23         grid-column-end: 4;
24         grid-row-start: 2;
25         grid-row-end: 4;
26     }
27     .item-7 {28         grid-column-start: 1;
29         grid-column-end: 3;
30         grid-row-start: 4;
31         grid-row-end: 4;
32     }
33     .item-12 {34         grid-column-start: 1;
35         grid-column-end: 4;
36         grid-row-start: 6;
37         grid-row-end: 6;
38     }
39 </style>
40 </head>
41 <body>
42
43 <div class="container">
44     <div class="item item-1">1</div>
45     <div class="item item-2">2</div>
46     <div class="item item-3">3</div>
47     <div class="item item-4">4</div>
48     <div class="item item-5">5</div>
49     <div class="item item-6">6</div>
50     <div class="item item-7">7</div>
51     <div class="item item-8">8</div>
52     <div class="item item-9">9</div>
53     <div class="item item-10">10</div>
54     <div class="item item-11">11</div>
55     <div class="item item-12">12</div>
56 </div>
57
58 </body>
59 </html>

预览效果如下:

转载于:https://www.cnblogs.com/yuan-yal-0/p/6207799.html

CSS Grid layout布局相关推荐

  1. 翻译 | CSS网格(CSS Grid)布局入门

    原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者:华翔 校对者:珂珂.干干 翻译 | CSS网格(CSS Grid)布局入门 bann ...

  2. CSS Grid 网格布局教程

    作者: 阮一峰 日期: 2019年3月25日 一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 ...

  3. CSS Grid 网格布局全解析

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

  4. CSS Grid网格布局全攻略

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

  5. CSS Grid 网格布局完整教程

    前言 一.概述 二.基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三.容器属性 3.1 display 属性 3.2 行与列属性定义 明文定义 百分比定义 repeat ...

  6. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  7. CSS—— grid 网格布局

    文章目录 1. grid 网格布局 1. grid 网格布局 display:grid grid 属性是以下属性的简写属性,默认: grid-gap , none,[200px]网格之间的距离 gri ...

  8. CSS Grid网格布局详解

    Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...

  9. 前端之css grid网格布局

    grid网格布局 一.创建 CSS 网格 1.说明 2.创建 CSS 网格 二.添加网格结构(行和列) 1. 在父容器中设置列 2. 在父容器中设置行 3. 使用 CSS 网格单位设置列和行的大小 三 ...

最新文章

  1. 如何轻松搞定CRUD的创建人、修改人、时间等字段的赋值
  2. c语言二叉排序树的创建与查找,C语言实现二叉查找树的插入和删除操作问题求教...
  3. 我家的漫路超市——怎么开淘宝网店
  4. 【Python】值得推荐的12个jupyter lab插件
  5. js调用.net后台事件,和后台调用前台等方法总结
  6. 查询同一表内多字段同时重复记录的SQL语句
  7. web前端【第十一篇】jQuery属性相关操作
  8. 四川省中职计算机考试题,四川省计算机等级考试模拟试题(一级)
  9. CentOS7下php安装mcrypt扩展
  10. 学习 | Node.js 之定时任务
  11. 修理计算机英语,英语口语对话:修理电脑
  12. [ocUI日记]UIwindow和UIview
  13. MacBooster清理除Mac大文件和旧文件
  14. Enterprise Manager 无法连接到数据库实例。下面列出了组件的状态。
  15. mysql拼接字符串的方式_mysql 字符串拼接,你知道几种方式?
  16. 区块链实现的关键技术_保险中的区块链:实现关键的增长机会
  17. Linux Minit Xshell5连接虚拟机Minit
  18. 基础知识——PMIC
  19. vue怎么给pc端浏览器设置一个最小屏幕_vue项目实现移动端适配的案例
  20. 宝藏世界登录不显示服务器,宝藏世界Trove玩不了怎么办 宝藏世界Trove进不去解决方法汇总...

热门文章

  1. 清理和删除svn信息
  2. Unity3d Time的使用
  3. php获取p标签的值,js使用html()或text()方法获取设置p标签的显示的值
  4. Framework中网络定位服务简介
  5. 【问链-Eos公开课】第四课 EOS 的钱包创建、导入私钥
  6. mob sdk vue 短信验证_短信接口那些事儿,你知道多少?
  7. java sql封装,在Java系统中封装SQL语言的处理方法及系统的制作方法
  8. java中的复合数据类型是什么_【填空题】类是Java中的一种重要的复合数据类型,是组成Java程序的基本要素。一个类的实现包括两部分:____和_____....
  9. cadence 常见pcb电阻_经验分享|高频PCB设计中出现的干扰分析及对策
  10. 怎么把series变为datamate_如何把时间序列问题转化为监督学习问题?通俗易懂的 Python 教程...