效果图如上所示

<!DOCTYPE html>

<html>

<head>

    <title>练习</title>

</head>

<body>

<link rel="stylesheet" type="text/css" href="file:///D:/Sublime%20Text%203/Sublime%20Text%203/%E4%BB%A3%E7%A0%81/Css%E5%AE%9E%E9%AA%8C">

<div class="container">

  <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>
.container{

   display: grid;

  grid-template-columns: 60px 60px 60px;

  grid-auto-rows: 60px 60px 60px 60px;

  background: pink;

  color: purple;

}

.one{

  grid-column-start:;

  grid-row-start:;

  grid-row-end:;

  grid-column-end:;

  background: orange;

}

.two{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background: green;

}

.three{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background: black;

}

.four{

  grid-column-start:;

  grid-row-start:;

  grid-row-end:;

  grid-column-end:;

  background: yellow;

  }

.five{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background: red;

  }

.six{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background:blue;

  }

CSS Grid的更多相关文章

  1. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

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

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

  3. 如何使用Flexbox和CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  4. CSS Grid 网格布局全解析

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

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

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

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

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

  7. CSS Grid 读书笔记

    基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...

  8. CSS Grid 布局

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

  9. css - Grid网格布局

    .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...

  10. css grid 网格布局

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

随机推荐

  1. Java 里面各种类型之间的相互转换

    1.整形与字符型之间的数据类型转换: 一.int转换成char有两种方法: ①  是利用char的unicode编码 例:int num1 = 8; char ch1 = (char) (num1 + ...

  2. linux 时间和时区设置

    在linux中与时间相关的文件有 /etc/localtime /etc/timezone 其中,/etc/localtime是用来描述本机时间,而 /etc/timezone是用来描述本机所属的时区 ...

  3. python3基础： 元组tuple、 列表list、 字典dict、集合set。 迭代器、生成器

    一.元组: tuple Python 的元组与列表类似,不同之处在于元组的元素不能修改. 元组中的元素值是不允许删除的,但我们可以使用del语句来删除整个元组 tup2 = (111, 22, 33, ...

  4. python中面向对象元类的自定义用法

    面向对象中的常用方法 1.instance 和 issubclass instance :判断两个对象是不是一类 issubclass :判断某个类是不是另一个类的子类 #两个常用方法的使用 clas ...

  5. jenkins Manage and Assign Roles使用

    1.安装插件  Role-based Authorization Strategy 2.使用插件 3.进入 Manage and Assign Roles  配置Pattern 匹配项目, 如果要匹配 ...

  6. php一次性大量数据入库解决方法

    当有业务需求需要一次性循环n条数据,插入或更新数据库时,如果单纯的循环,插入/更新,会消耗太多的数据库资源   一下是一种简单的解决方案   数据库的insert 是可以批量更新的,当有大量数据循环i ...

  7. MySQL中基于mysqldump和二进制日志log-bin进行逻辑备份以及基于时间点的还原

    本文出处:http://www.cnblogs.com/wy123/p/6956464.html 本文仅模拟使用mysqldump和log-bin二进制日志进行简单测试,仅作为个人学习笔记,可能离实际 ...

  8. 如何关闭wps热点，如何关闭wpscenter，如何关闭我的wps

    用wps已经快十年了,最开始的时候速度快,非常好用,甩office几条街,但最近这几年随着wps胃口越来越大,各种在线功能不断推出,植入广告越来越多,逐渐让人失去欢喜. 通过各种网帖的经验,我把网上流 ...

  9. cdnbest自定义错误显示节点名教程

    在自定义错误里选择js选项,输入: document.write("error!" + hostname); 这是最简单的写法,只显示节点名,如果要显示其他效果,可自已修改js

  10. spring mvc重定向

    spring mvc重定向有三种方法. 1.return new ModelAndView("redirect:/toUrl"); 其中/toUrlt是你要重定向的url. 2.r ...