.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. STM32.printf

    printf("\r\n this is a usart printf demo \r\n"); Use Micro LIB 需要勾选这个库 将串口定义成 printf 函数 #i ...

  2. ubuntu16.04下编译ceres-solver

    一.编译环境 ubuntu16.04 二.准备工作之安装必要的库 2.1安装cmake sudo apt-get install cmake 2.2 安装google-glog + gflags su ...

  3. P3870 [TJOI2009]开关

    思路 重题 代码 #include <iostream> #include <vector> #include <cstdio> #include <cstr ...

  4. C#学习笔记（十五）：抽象方法、抽象类、多态和接口

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 【java工具类】java做的一个xml转Excel工具，基于maven工程

    说明:适合数据库导出为xml时转成Excel 本工具将上传至GitHub:https://github.com/xiaostudy/xiaostudyAPI3 doc4j的maven依赖 <!- ...

  6. yunw

  7. MVC ---- 理解学习Func用法

    //Func用法 public static class FuncDemo{ public static void TestFunc(){ //数据源 List<User> usList ...

  8. Quartz.NET教程：(01) 使用Quartz

    使用调度器 (scheduler) 之前要先用 ISchedulerFactory 的一个实现来实例化调度器(scheduler).一旦调度器实例化完成,则它可以被启动.置于备用模式或者关闭.需要注意 ...

  9. python计算结果显示小数

    先将整型转换成float型,在计算,结果就有小数了 >>> a = >>> b = >>> c = a/b >>> a,b,c ...

  10. python 无序表查找

    def sequential_search(lis, key): for i in range(len(lis)): if(lis[i] == key): return i else: return ...