效果图如上所示

<!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. XSY contest1586 proB

    题目 现在一圈n个花坛, 每次随机往一个花盆里种花, 一个花盆可以种多颗花, 假如一个花盆两边的花盆都有花, 那么他也将被种上花 问期望种满所有花盆要种几次 首先定义f(i)为放置了i个物品后完全覆盖 ...

  2. Github 大牛封装 Python 代码，实现自动发送邮件只需三行代码

    *注意:全文代码可左右滑动观看 在运维开发中,使用 Python 发送邮件是一个非常常见的应用场景.今天一起来探讨一下,GitHub 的大牛门是如何使用 Python 封装发送邮件代码的. 一般发邮件 ...

  3. [python,2018-03-06] python中的继承顺序

    python 支持多继承,但对与经典类和新式类来说,多继承查找的顺序是不一样的.  经典类: 新式类   class P1:      def foo(self):                   ...

  4. 在VMware中为Redhat HAT配置本地yum源

    在VMware中为Redhat HAT配置本地yum源 今天准备使用CM安装大数据环境,到需要几台机器都使用同一套yum源才可以,所以想到将Redhat镜像文件拷贝到虚拟机中,在挂起使用,最后通过ht ...

  5. python——位运算之进制转化

    >>> a=0b001100 >>> a 12 >>> b=0o001100 >>> b 576 >>> c= ...

  6. CentOS7（64）环境使用rpm命令安装gcc

    第一步:下载gcc相关的安装文件下载地址:http://vault.centos.org/7.0.1406/os/x86_64/Packages/ 下载以下文件: cpp-4.8.2-16.el7.x ...

  7. elasticsearch-权威指南笔记-基础部分

    参考这里的文档es权威指南 话说这个坑爹的文档是2.x版本的es,英文版本也是,所以就没啥好抱怨的了. 官方教程中有很多坑 例如,需要启动text上的索引. 还有就是get这个是不能带json的,所以 ...

  8. django AnonymousUser

    AnonymousUser对象class models.AnonymousUser django.contrib.auth.models.AnonymousUser是一个实现django.contri ...

  9. 用命令生成Webservice 对应的代理类

    wsdl /language:C# /namespace:Camstar.WebPortal.WebPortlets.Shopfloor.SAP.GreatWall /out:gwSAPService ...

  10. Python SMTP发送邮件

    import smtplibfrom email.mime.text import MIMEText  # 引入smtplib和MIMEText host = 'smtp.163.com'  # 设置 ...