首先来看一下效果图

接下来废话不多说，先上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 610px;

            height: 610px;

            margin: 100px auto;

            display: grid;/* 说明以grid布局 */

            grid-template-columns: 200px 5px 200px 5px 200px;/* 网格划分为五列，包括间隔 */

            grid-template-rows: 200px 5px 200px 5px 200px;/* 网格划分为五行，包括间隔 */

        }

        .a{

            grid-column-start: 1;/* 单元格开始的那条列线 */

            grid-column-end: 2;/* 单元格结束的那条列线 */

            grid-row-start: 1;/* 单元格开始的那条行线 */

            grid-row-end: 4;/* 单元格结束的那条行线 */

            background: #5a5eff;

        }

        .b{

            grid-column-start: 3;

            grid-column-end: 4;

            grid-row-start: 1;

            grid-row-end: 2;

            background: #F672E2;

        }

        .c{

            grid-column-start: 5;

            grid-column-end: 6;

            grid-row-start: 1;

            grid-row-end: 2;

            background: #FDF505;

        }

        .d{

            grid-column-start: 3;

            grid-column-end: 4;

            grid-row-start: 3;

            grid-row-end: 4;

            background: #F90B0B;

        }

        .e{

            grid-column-start: 5;

            grid-column-end: 6;

            grid-row-start: 3;

            grid-row-end: 6;

            background: #41a8ff;

        }

        .f{

            grid-column-start: 1;

            grid-column-end: 2;

            grid-row-start: 5;

            grid-row-end: 6;

            background: #10FDD0;

        }

        .g{

            grid-column-start: 3;

            grid-column-end: 4;

            grid-row-start: 5;

            grid-row-end: 6;

            background: #16FA07;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="a"></div>

        <div class="b"></div>

        <div class="c"></div>

        <div class="d"></div>

        <div class="e"></div>

        <div class="f"></div>

        <div class="g"></div>

    </div>

</body>

</html>

代码就这么多，还是挺简单的。

网格如下划分成五列，则用了6条列线

划分为五行，则用了6条行线

（请随意吐槽这张图片）

主要可以参考，http://www.tuicool.com/articles/F3mMJzv，里面有较详细的说明，图片也比较清晰，个人推荐可以参考一下

结合这张图片，应该很好理解的

还是很容易理解 的。

 

css grid布局的首次使用的更多相关文章

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

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

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

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

  3. CSS Grid 布局

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

  4. CSS Grid布局指南

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

  5. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  6. 5分钟学会 CSS Grid 布局

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 这是一篇快速介绍网站未来布局的文章. Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工 ...

  7. css Grid布局

    CSS Grid 布局完全指南(图解 Grid 详细教程)https://www.html.cn/archives/8510#prop-grid-gap 5分钟学会 CSS Grid 布局https: ...

  8. 带你入门 CSS Grid 布局

    前言 三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...

  9. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

随机推荐

  1. JS中都有哪些数据类型呢？

    js中有5种数据类型:Undefined.Null.Boolean.Number和String.还有一种复杂的数据类型Object,Object本质是一组无序的名值对组成的.

  2. ORACLE-EXP和IMP方法介绍

    说明: 之前经常有人询问数据库导出导入的方法,去百度查询,但是查询的结果却不是很尽如人意,所以在此做个基本的总结,包括 导出:(导出用户,导出表,导出表结构不带数据,QUERY参数),导入(导入数据文 ...

  3. flask扩展模块flask-sqlachemy 的使用---mysql数据库

    该篇博客配置环境为:python版本3.5,flask2.0,python3中已经不再支持MySQLdb模块,所有这里我用了pymysql,所有使用前应该 安装pymysql:pip install ...

  4. Linux 内存优化

    1.清理前内存使用情况 free -m2.开始清理   echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: ...

  5. 应用控制台应用程序开发批量导入EXEL程序。

    一.最近一直在调整去年以及维护去年开发的项目,好久没有在进行个人的博客了.每天抽了一定的时间在研究一些开源的框架,Drapper 以及NHibernate以及当前比较流行的SqlSuper框架 并进行 ...

  6. 令人眼前一亮的下拉式终端 Tilda & Guake

    前言 老夫是 Linux 的老用户. 大一的时候某不方便透露姓名的校内组织给了一个 Fedora 13 的安装光盘,然后老夫学会了重装 Windows. 大二的时候知道了 Ubuntu ,开始在虚拟机 ...

  7. 《shell脚本学习指南》学习笔记之入门

    为什么要使用shell脚本? shell脚本能够轻易处理文件与目录之类的对象,而且是各UNIX系统之间经过POSIX标准化的通用的功能,因此Shell脚本只要“用心写”一次,即可应用到很多系统上,因此 ...

  8. 微信小程序怎样提高应用速度小技巧

    作者:vicyao, 腾讯web前端开发 高级工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/294.htm ...

  9. Triangle Problems

    Triangle Problem songxiuhuan 宋修寰 Import the Junit and eclemma Choose the project and right click, ch ...

  10. OpenFlow硬件交换机制作及刷机教程

    1.目的 将普通路由器升级成为一台支持OpenFlow的交换机. 具体哪些路由器可以刷OpenFlow可以参考:OpenWRT:http://wiki.openwrt.org/toh/start#su ...