网格布局介绍：

CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能结合在一起工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块，我们终于不需要想尽办法hack 页面布局样式了。

网格布局举例及注释：

 <!doctype html>

 <html>

 <head>

 <title>grid layout</title>

 <style>

 .wrapper {

 display: grid;                                /*定义grid布局*/

 grid-template-columns: repeat(3, 1fr);        /*网格的列*/

 grid-gap: 10px;                               /*列和行之间的间距为10px*/

 grid-auto-rows: minmax(100px, auto);          /* 行从最小100px到延申*/

 }

 .one {                                        /* one类 */

 grid-column: 1 / 3;                           /* 列从第一行到第三行 */

 grid-row: 1;                                  /* 第一行 */

 }

 .two {                                        /* two类 */

 grid-column: 2 / 4;                           /* 列从第二列到第四列 */

 grid-row: 1 / 3;                              /* 行从第一行到第三行 */

 }

 .three {                                      /* three类 */

 grid-column: 1;                               /* 第一列 */

 grid-row: 2 / 5;                              /* 行从第二行到第五行 */

 }

 .four {                                       /* four类 */

 grid-column: 3;                               /* 第三列 */

 grid-row: 3;                                  /* 第三行 */

 }

 .five {                                       /* five类 */

 grid-column: 2;                               /* 第二列 */

 grid-row: 4;                                  /* 第四行 */

 }

 .six {                                        /* six类 */

 grid-column: 3;                               /* 第三列 */

 grid-row: 4;                                  /* 第四行 */

 }

 </style>

 </head>

 <body>

 <div class="wrapper">

 <div class="one">One</div>

 <div class="two">Two</div>

 <div class="three">Three</div>

 <div class="four">Four</div>

 <div class="five">Five</div>

 <div class="six">Six</div>

 </div>

 </body>

 </html>

CSS 对于grid布局的理解，举例代码及解释的更多相关文章

  1. 理解css中Grid布局，在项目中如何实现grid页面布局

    简介 CSS中Grid是一种二维网格式布局方式.我们常规使用table.float.position.inline-block等布局,但它们遗漏了很多功能,例如垂直居中.后来css3中flexbox的 ...

  2. 前端每日实战：141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...

  3. 前端每日实战：142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...

  4. 图文详解前端CSS中的Grid布局，你真的可以5分钟掌握

    前言 网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局 首先我们看看 ...

  5. 第二次前端作业grid布局练习

    grid布局 CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统,它的目标是完全改变我们基于网格的用户界面的布局方式.CSS 一直用来布局我们的网页,但一 ...

  6. 新手的grid布局

    html部分 <!DOCTYPE html><html><head><meta charset="utf-8"><link r ...

  7. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  8. 快速使用CSS Grid布局，实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  9. CSS Grid布局指南

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

随机推荐

  1. Linux上查找最大文件的 3 种方法

    有时候我们在系统上安装了数十个应用程序,随着使用时间的推移,许多文件变得越来越大,从而导致磁盘空间越来越小.那么问题来了,如何找到系统上这些大文件,然后进行一番磁盘空间清理呢,这篇文章就此介绍几种查找 ...

  2. placeHolder和defaultValue的区别

    placeHolder和defaultValue的区别 (1)placeHolder用于提示用户,它不与后端进行交互. (2)defaultValue则是与后端交互时的默认值. 举例说明:在Selec ...

  3. Angular.的简单运用

    从script引用angular文件.开始编写angular事件: 在angular文件中添加属性: ag-xxxx;初始化使用: ng-app="name"; 没有这个属性就不会 ...

  4. schedule of 2016-10-24~2016-10-30（Monday~Sunday）——1st semester of 2nd Grade

    2016/10/24 Monday forcus:find a way to try to recognize emotions in database2.0(see ppt Week 7) 1.pr ...

  5. html 小游戏合集（1.0）

    最近做了个小游戏合集,有点沙雕,毕竟是1.0,将就看看. <!DOCTYPE html> <html> <head> <meta charset=" ...

  6. Scala实践9

    1.特征 Traits用于在类之间共享接口和字段.它们类似于Java 8的接口.类和对象可以扩展特征,但是特征不能被实例化,因此没有参数. 定义一个特征 最小特征只是关键字trait和标识符: tra ...

  7. python判断是否是质数

    质数:只能被1和它自身整除 # 获取用户输入的数,判断是否是质数 num = int(input('输入一个任意的大于1的整数:')) i=2 # 创建一个变量,记录是否是质数,默认num是质数 fl ...

  8. java通过word模板生成word文档

    介绍 上次公司项目需要一个生成word文档的功能,有固定的模板根据业务填充数据即可,由于从来没做过,项目也比较着急于是去网上找有没有合适的工具类,找了好几种,看到其中有freeMark模板生成比较靠谱 ...

  9. 《【面试突击】— Redis篇》-- Redis哨兵原理及持久化机制

    能坚持别人不能坚持的,才能拥有别人未曾拥有的.关注编程大道公众号,让我们一同坚持心中所想,一起成长!! <[面试突击]— Redis篇>-- Redis哨兵原理及持久化机制 在这个系列里, ...

  10. 【转】oracle条件子句执行顺序

    Oracle WHERE条件执行顺序:ORACLE采用自下而上的顺序解析WHERE子句 1.据此那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾例如:SELECT … FROM EMP E ...