直接 上代码，里面我加注释，相当的简单, 也可以去我的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. Grunt：常见错误

    ylbtech-Grunt:常见错误 1.返回顶部 1. D:\lab6\DS.JZB.Web>grunt build Running "clean:dist" (clean ...

  2. 我对sobel算子的理解

    转自:http://blog.csdn.net/yanmy2012/article/details/8110316 索贝尔算子(Sobeloperator)主要用作边缘检测,在技术上,它是一离散性差分 ...

  3. 'xxx' declared `static' but never defined

    'xxx' declared `static' but never defined [问题描述] uart.c文件中有函数read_sample的实现: [plain] view plain copy ...

  4. 【转】python的复制，深拷贝和浅拷贝的区别

    在python中,对象赋值实际上是对象的引用.当创建一个对象,然后把它赋给另一个变量的时候,python并没有拷贝这个对象,而只是拷贝了这个对象的引用 一般有三种方法, alist=[1,2,3,[& ...

  5. Python 查看本机WiFi密码

    http://www.lijiejie.com/python-get-all-saved-wifi-passwords/ 很早以前我写过一个,丢了.  今天偶然看到这篇文章 , 也是很久以前写的,他用 ...

  6. c# dll自动注册

    在网上看到一个c# dll自动注册的文章,我测试了一下,可用. 下面是具体代码 [DllImport("Ry4SCom.dll")] public static extern in ...

  7. 3.7-3.9 HBase表属性

    一.表压缩 1.HBase Sanppy HBase Sanppy 1)配置Haodop压缩 [beifeng@hadoop-senior hadoop-2.5.0]$ bin/hadoop chec ...

  8. Socket 阻塞与非阻塞模式

    http://blog.sina.com.cn/s/blog_5d0990c7010115ib.html

  9. debian linux中文桌面系统安装

    一.基本系统安装 1 .安装光盘:可以到http://debian.cn99.com去下载ISO,我是之前从官方网站下载的.一只载第一张光盘即可.用NERO烧录成光碟. 2.将安装光盘放驱,并在BIO ...

  10. EditText 设置可以输入的字符，过滤不符合接口要求的数据的方法

    1.设置EditText的android:digits 属性, 这种方式可以指出要支持的字符.比如要限制只能输入数字和字母,可以这样android:digits="1234567890ABC ...