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