.wrapper {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 10px;

    grid-auto-rows: minmax(100px, auto);

  }

  .one {

    background-color: blueviolet;

    grid-column: 1 / 3;

    grid-row: 1;

  }

  .two {

    background-color: blue;

    grid-column: 2 / 4;

    grid-row: 1 / 3;

  }

  .three {

    background-color: rgb(226, 147, 43);

    grid-column: 1;

    grid-row: 2 / 5;

  }

  .four {

    background-color: rgb(148, 125, 168);

    grid-column: 3;

    grid-row: 3;

  }

  .five {

    background-color: rgb(68, 45, 88);

    grid-column: 2;

    grid-row: 4;

  }

  .six {

    background-color: rgb(86, 226, 43);

    grid-column: 3;

    grid-row: 4;

  }

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="例子.css">

</head>

<body>

    <div class="wrapper">

        <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>

　　

 演示如下：

关于display：grid layout的更多相关文章

  1. iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6

    In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...

  2. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  3. [Grid Layout] Use the repeat function to efficiently write grid-template values

    We can use the repeat() function if we have repeating specifications for columns and rows. With the  ...

  4. [CSS] Get up and running with CSS Grid Layout

    We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...

  5. CSS中的 position与Grid Layout

    [1]CSS之Position(定位布局): 现css常用的属性有5种: 1.static 2.absolute 3.fixed 4.relative 5.sticky. 1.static 表示元素的 ...

  6. css之Grid Layout详解

    css之Grid Layout详解 CSS Grid Layout擅长将页面划分为主要区域,或者在从HTML基元构建的控件的各个部分之间定义大小,位置和图层之间的关系. 与表格一样,网格布局使作者能够 ...

  7. CSS3 Grid Layout & <track-size> & <line-name>

    CSS3 Grid Layout & <track-size> & <line-name> grid container grid-template: < ...

  8. css grid layout in practice

    css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...

  9. css-next & grid layout

    css-next & grid layout css3 demo https://alligator.io/ @media only screen and (max-width: 30em) ...

随机推荐

  1. 车载项目问题解（memset）

    1memset函数解 1.void *memset(void *s,int c,size_t n) 总的作用:将已开辟内存空间 s 的首 n 个字节的值设为值 c.2.例子 #includevoid ...

  2. PyQt5 - 01 使用qt creator创建第一个pyqt5界面程序

    1. 安装Qt Creator qt creator下载点我 2. 利用Qt Creator创建界面 点击文件 -> 新建文件或项目 选择Qt -> Qt设计师界面类 选择一个模版,创建一 ...

  3. 再谈树---无根树转有根树( dfs搜索转化+fa数组记录父节点) *【模板】

    #include <stdio.h> #include <string.h> #include <stdlib.h> #include <vector> ...

  4. url rewrite导致的500.19 0x8007000d

    https://stackoverflow.com/questions/13532447/http-error-500-19-iis-7-5-error-0x8007000d It seems you ...

  5. ASP.NET MVC之Bundle压缩JS和CSS

    介绍Bundle之前先引用<淘宝技术这十年>中一段话,对Web前端稍微有点常识的人都应该知道,浏览器下一步会加载页面中用到的CSS.JS(JavaScript).图片等样式.脚本和资源文件 ...

  6. 【转载】可被路由的协议 & 路由协议 & 不可被路由的协议 的区别

    原文地址:可被路由的协议 & 路由协议 & 不可被路由的协议 的区别 术语routed protocol(可被路由的协议)和routing protocol(路由协议)经常被混淆.可被 ...

  7. HDU 5961 传递

    http://acm.hdu.edu.cn/showproblem.php?pid=5961 题意: 思路: 话不多说,直接暴力. #include<iostream> #include& ...

  8. 51nod 1076 2条不相交的路径（边双连通分量）

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1076 题意: 思路: 边双连通分量,跑一遍存储一下即可. #includ ...

  9. 退出shell 脚本

    #!/bin/bash export TOP_PID=$$ trap 'exit 1' TERM exit_script(){ kill -s TERM $TOP_PID } echo "b ...

  10. 关于nohup 和 &的使用

    nohup  是 no hang up 的缩写,意思是不挂断运行,一直运行下去,永久运行下去,但是注意并没有后台运行的功能 & 是在后台运行的意思 单独使用一个命令,还不能在终端关闭的时候,让 ...