效果图如上所示

<!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. 使用Mechanize实现自动化表单处理

    使用Mechanize实现自动化表单处理   mechanize是对urllib2的部分功能的替换,能够更好的模拟浏览器行为,在web访问控制方面做得更全面 mechanize的特点: 1 http, ...

  2. sweetalert弹窗的使用

    之前接触到layer弹出层,今天又发现了一个非常实用的弹出层插件,它的名字叫做sweetalert. 官网地址:http://t4t5.github.io/sweetalert/ npm下载方式:np ...

  3. 阿里云服务器 CentOS 安装Mysql 5.6

    下载:https://dev.mysql.com/downloads/file/?id=471181   第一步: 安装mysql5姿势是要先安装带有可用的mysql5系列社区版资源的rpm包 [ro ...

  4. python 数据分析库介绍

    1 引言 高效处理数据的python工具: 与外界进行交互: 读写各种文件格式和数据库 准备: 对数据进行清理.修整.整合.规范化.重塑.切片切换.变形等处理以便进行分析 转换: 对数据集做一些数学和 ...

  5. [原]vue中各模块的实际引用

    检查发现: 1.vue实际引用文件配置位置 alias: { 'vue$': 'vue/dist/vue.esm.js', 此位置替换了vue包内的package.json中定义的位置 } 2.vue ...

  6. 尚硅谷springboot学习30-docker安装mysql示例

    docker pull mysql 错误的启动示例 错误日志:需要设置密码 正确的启动 但还不能直接使用,因为没有做端口映射,外界无法连接 可用的启动 连接成功 几个高级的操作 指定配置文件 dock ...

  7. inline、block与inline-block

    参考了一些资料集其他人的博客,梳理一下inline.block与inline-block三个概念.     高度 宽度 举例 block 在新行上开始 高度,行高以及顶和底边距都可控制 宽度缺省是它的 ...

  8. JDBC缺点分析

    * JDBC代码繁琐,每一次JDBC都需要编写“同样”的六步. * sql不能配置,在JDBC编程中sql语句是写在java源程序当中的,sql语句经常会发生改变(业务发生了改变),sql改变之后,需 ...

  9. c++ 中的数字和字符串的转换

    理由:一直忘记数字型的字符串和数字之间的转换,这次总结一下,以便后面再次用到. 其实 C++ 已经给我们写好了相应的函数,直接拿来用即可 QA1:如何把一个数字转换为一个数字字符串?(这个不是很常用) ...

  10. python 删除非空文件夹

    import os import shutil os.remove(path) #删除文件 os.removedirs(path) #删除空文件夹 shutil.rmtree(path) #递归删除文 ...