首先来看一下效果图

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

<!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. Ubuntu纯字符界面的一些设置

    由于Ubuntu的纯字符界面不支持中文显示,所以进行了一些配置,为了更好的显示 1. 把环境语言配置为英文 在用户目录下的".bashrc"文件的结尾处添加以下内容,然后重新登录 ...

  2. (五)Lua脚本语言入门

    ---恢复内容开始--- 写完这篇Lua脚本语言入门,自己就要尝试去用Lua脚本语言写esp8266了,,自己现在挺心急的,因为朋友使用esp8266本来说自己帮忙写好程序的,但是用的单片机不一样自己 ...

  3. 第二章:JavaScript对象

    一.window对象 1.属性 2.方法 二.history对象 1.方法 三.location对象 1.属性 2.方法 四.Document对象 1.属性 2.方法

  4. groovy学习(二)map

    names = ['Ken' : 'Barclay', 'John' : 'Savage']divisors = [4 : [2], 6 : [3, 2], 12 : [6, 4, 3, 2]]pri ...

  5. HTTP基础知识（二）

    接着上一章的内容:HTTP基础知识(一)   二.简单的HTTP协议 1.客户端:请求访问文本或图像等资源的一端称为客户端: 服务器端:提供资源响应的一端   2.以百度为例子 这是请求头: 在起始行 ...

  6. tcp粘包和拆包的处理方案

    随着智能硬件越来越流行,很多后端开发人员都有可能接触到socket编程.而很多情况下,服务器与端上需要保证数据的有序,稳定到达,自然而然就会选择基于tcp/ip协议的socekt开发.开发过程中,经常 ...

  7. C#如何获取指定周的日期范围

    1. 不允许跨年 1) 第一周的第一天从每年的第一天开始,最后一周的最后一天为每年的最后一天. static void Main(string[] args) { DateTime first, la ...

  8. 用C#代码实现类似QQ窗体的“上、左、右”停靠功能

    大家都知道QQ有一个自动停靠功能,即“上.左.右”,当你把窗体拖到屏幕边缘,然后移开鼠标它会自动缩放,然后只显示一小小点出来,我们仔细观察会发现其实它只露3像素左右的边缘,当你鼠标移上去它又会伸出来, ...

  9. MySQL Sniffer

    MySQL Sniffer 是360开源的一个基于 MySQL 协议的抓包工具, 能实时抓取客户端端请求,并格式化输出操作语句,操作十分简单.对于问题的定位,操作的审核是个不错的利器. Github地 ...

  10. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...