直接 上代码，里面我加注释，相当的简单, 也可以去我的github上直接下载代码，顺手给个星：https://github.com/yurizhang/micro-finance-admin-system/blob/master/grid.html

<!DOCTYPE html>

<html>

<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">

<meta content=yes name=apple-mobile-web-app-capable>

<meta content=yes name=apple-touch-fullscreen>

<meta content="telephone=no,email=no" name=format-detection>

<head>

    <title>Gird示例</title>

    <style>

        body,

        html {

            padding: 0;

            margin: 0;

        }

        .wrapper {

            display: grid;

            grid-template-columns: 1fr 1fr;

            /*表示2列*/

            grid-template-rows: 1fr 2fr 1fr 2fr;

            /*第二行的高是第一行的2倍,我们现在可以设置行高之间的关系。如果我们把前面的行高设成 1fr ，最后一个则设置为 3fr，这意味着第二行的行高是第一行的 3 倍：*/

            grid-column-gap: 1px;

            /*列之间的线*/

            grid-row-gap: 1px;

            /*行之间的线隔*/

            background-color: rgb(117, 112, 112);

        }

        @media screen and (min-width: 500px) {

            /*超过500显示三列*/

            .wrapper {

                grid-template-columns: 1fr 1fr 1fr;

            }

        }

        @media screen and (min-width: 800px) {

            /*超过800四列*/

            .wrapper {

                grid-template-columns: 1fr 1fr 1fr 1fr;

            }

        }

        .letter {

            background-color: #0069b3;

            display: flex;

            justify-content: center;

            /*flex的相差属性居中对齐*/

            align-items: center;

            /*容器里元素垂直居中*/

            padding: 20px;

            font-size: 70px;

            color: white;

            line-height: 1;

            font-family: 'hobeaux-rococeaux-background', Helvetica;

            font-weight: 200;

            cursor: pointer;

            transition: all .3s ease;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class="letter">

            Aa

        </div>

        <div class="letter">

            Bb

        </div>

        <div class='letter'>

            Cc

        </div>

        <div class='letter'>

            Dd

        </div>

        <div class="letter">

            Ee

        </div>

        <div class="letter">

            Ff

        </div>

        <div class='letter'>

            Gg

        </div>

        <div class='letter'>

            Hh

        </div>

        <div class="letter">

            Ii

        </div>

        <div class="letter">

            Jj

        </div>

        <div class='letter'>

            Kk

        </div>

        <div class='letter'>

            Mm

        </div>

    </div>

</body>

</html>

效果如下：

<!DOCTYPE html>
<html>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta content=yes name=apple-mobile-web-app-capable>
<meta content=yes name=apple-touch-fullscreen>
<meta content="telephone=no,email=no" name=format-detection>


<head>
<title>Gird示例</title>
<style>
body,
html {
padding: ;
margin: ;
}

.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
/*表示2列*/
grid-template-rows: 1fr 2fr 1fr 2fr;
/*第二行的高是第一行的2倍,我们现在可以设置行高之间的关系。如果我们把前面的行高设成 1fr ，最后一个则设置为 3fr，这意味着第二行的行高是第一行的 3 倍：*/
grid-column-gap: 1px;
/*列之间的线*/
grid-row-gap: 1px;
/*行之间的线隔*/
background-color: rgb(, , );
}

@media screen and (min-width: 500px) {
/*超过500显示三列*/
.wrapper {
grid-template-columns: 1fr 1fr 1fr;
}
}

@media screen and (min-width: 800px) {
/*超过800四列*/
.wrapper {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}



.letter {
background-color: #0069b3;
display: flex;
justify-content: center;
/*flex的相差属性居中对齐*/
align-items: center;
/*容器里元素垂直居中*/
padding: 20px;
font-size: 70px;
color: white;
line-height: ;
font-family: 'hobeaux-rococeaux-background', Helvetica;
font-weight: ;
cursor: pointer;
transition: all .3s ease;
}
</style>
</head>


<body>
<div class="wrapper">
<div class="letter">
Aa
</div>


<div class="letter">
Bb
</div>


<div class='letter'>
Cc
</div>
<div class='letter'>
Dd
</div>
<div class="letter">
Ee
</div>


<div class="letter">
Ff
</div>


<div class='letter'>
Gg
</div>
<div class='letter'>
Hh
</div>
<div class="letter">
Ii
</div>


<div class="letter">
Jj
</div>


<div class='letter'>
Kk
</div>
<div class='letter'>
Mm
</div>
</div>
</body>
</html>

CSS grid layout demo 网格布局实例的更多相关文章

  1. css grid layout in practice

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

  2. 如何使用Flexbox和CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  3. CSS Grid Layout In Action

    CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...

  4. 如何使用 Flexbox 和 CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  5. CSS: Grid Layout Module

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

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

  7. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

  8. CSS grid layout

      CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小.位置和图层之间的关系. 像表格一样,网格布局让我们能够按行或列来对齐元素. 但是,使用CSS网格可能还是比CSS表格更容 ...

  9. 各个浏览器开启CSS Grid Layout的方式

    2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...

随机推荐

  1. 51Nod 1362 搬箱子 —— 组合数(非质数取模) (差分TLE)

    题目:http://www.51nod.com/Challenge/Problem.html#!#problemId=1362 首先,\( f[i][j] \) 是一个 \( i \) 次多项式: 如 ...

  2. POJ3928(树状数组:统计数字出现个数)

    Ping pong Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2641   Accepted: 978 Descript ...

  3. cat的用法总结

    1 查看文件在LINUX下一切皆文件,光看见文件名和目录名对我们来说,还远远不够.今天,就来介绍一下可以打开文件的命令cat.当然,二进制的可执行文件,不能用cat. 在CentOS7下,以/etc/ ...

  4. ACM实用C语言函数

    函数名: abs 功 能: 求整数的绝对值 用 法: int abs(int i); 程序例: #include <stdio.h> #include <math.h> int ...

  5. Docker入门（二）：安装/卸载

    这个<Docker入门系列>文档,是根据Docker官网(https://docs.docker.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指 ...

  6. Advanced R之数据结构

    看了几本R语言语法相关的书籍,感觉都不怎么好,在实际使用过程中仍然遇到很多难以理解的问题,后来看了Hadley Wickham的Advanced R,好多问题迎刃而解,今天重温了该书的第一章即数据结构 ...

  7. Win10下Anaconda中安装Tensorflow

    1.安装Anaconda 下载:https://repo.continuum.io/archive/,我用的是Python 3.5 ,64位系统,所以选择的版本是Anaconda2-4.2.0-Win ...

  8. Python 在windows上安装BeautifulSoup和request以及小案例

    Python以及PyCharm安装成功后,操作如下: 此时,代码import requests不报错了. 那么,Python 在windows上安装BeautifulSoup,怎么操作呢? 1. 打开 ...

  9. JQuery中查找父元素，子元素,追加元素，插入元素和删除元素 及其他常用方法

    Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...

  10. python中出现 IndentationError:unindent does not match any outer indentation level

    python中出现IndentationError:unindent does not match any outer indentation level 今天在网上copy的一段代码,代码很简单,每 ...