效果图如上所示

<!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. Core Graphices 设置渐变

    Core Graphices 设置渐变 Quartz 提供了两种设置渐变的方式  CGShadingRef and CGGradientRef 尝试CGGradientRef 的使用 import & ...

  2. 关于java和jvm的思考

    1. 多线程并发访问一个静态方法(static method)会不会有什么性能影响? 思考:不会,原因是static method编译后及时一串指令(jvm中的静态方法区,也叫non-heap(包含了 ...

  3. Django model 字段类型及选项解析

    字段类型选择: AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 ...

  4. svn Advanced

    1.Eclipse last 1.Eclipse 安装subversive插件: 安装连接器: 打开视图"SVN Repositories": 创建“资源库位置”: 配置全局范围文 ...

  5. AtomicInteger类和int原生类型自增鲜明的对比

      AtomicInteger这个类的存在是为了满足在高并发的情况下,原生的整形数值自增线程不安全的问题.比如说 int i = 0 ; i++; 上面的写法是线程不安全的. 有的人可能会说了,可以使 ...

  6. 让UITableView的section header view不悬停的方法

    当 UITableView 的 style 属性设置为 Plain 时,这个tableview的section header在滚动时会默认悬停在界面顶端.取消这一特性的方法有两种: 将 style 设 ...

  7. C#调用java代码(IKVMC)

    参考资料:https://blog.csdn.net/threadroc/article/details/51406587 参考1:http://www.cnblogs.com/Jack-Blog/p ...

  8. BUILDING WITH BOOTSTRAP

    BUILDING WITH BOOTSTRAP Bootstrap Generalizations You just built an impressive webpage using the Boo ...

  9. ionic+cordova填坑

    1.命令行更新 cordova,ionic.nodejs ,npm,bower等到新版本,不要在vs中更新 2.程序突然白屏 因为拷贝其他程序到js中,乱码 :a模拟器打开 f12看控制台错误解决 3 ...

  10. JPA和SpringData知识梳理

    一. JPA,全称Java Persistence API,用于对象持久化的API,定义一套接口,来规范众多的ORM框架,所以它是在ORM框架之上的应用. 下面主要讲JPA在Hibernate基础上的 ...