直接 上代码，里面我加注释，相当的简单, 也可以去我的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. poj3422K方格取数——最大费用最大流

    题目:http://poj.org/problem?id=3422 最大费用最大流: 拆点,在自点之间连两条边,一条容量为1,边权为数字:一条容量为k-1,边权为0:表示可以走k次,只有一次能取到数字 ...

  2. C# GUID使用总结

    全局唯一标识符(GUID,Globally Unique Identifier) What is GUID 也称作 UUID(Universally Unique IDentifier) . GUID ...

  3. 利用反射拿到并递归C#类中的各个字段名字及类型

       以下方法实现了遍历一个class中所有的字段, 并且递归遍历sub class.  private StringBuilder _properties = new StringBuilder() ...

  4. SRAM SROM DRAM DROM DDR NAND FLASH EMMC的区别

    RAM(Random Access Memory)的全名为随机存取记忆体,它相当于PC机上的移动存储,用来存储和保存数据的.它在任何 时候都可以读写,RAM通常是作为操作系统或其他正在运行程序的临时存 ...

  5. UVa 1663 Purifying Machine (二分匹配)

    题意:每一个01串中最多含有一个‘*’,‘*’既可表示0也可表示1,给出一些等长的这样的01串,问最少能用多少个这样的串表示出这些串. 如:000.010.0*1表示000.010.001.011,最 ...

  6. MVC+NHibernate笔记

    Nhibernate 要求model实体类对于lazy="true" ,字段属性前需要加 virtual sqlserver2005和oracle10g的hibernate.cfg ...

  7. Go语言调度器之盗取goroutine(17)

    本文是<Go语言调度器源代码情景分析>系列的第17篇,也是第三章<Goroutine调度策略>的第2小节. 上一小节我们分析了从全局运行队列与工作线程的本地运行队列获取goro ...

  8. JSP 标准标签库（JSTL）(菜鸟教程)

    菜鸟教程 JSTL 1.1 与 JSTL 1.2 之间的区别?如何下载 JSTL 1.2? JSTL 1.2 中不要求 standard.jar 包. 您可以在 Maven 中央仓库中找到它们. ht ...

  9. java接口中成员变量和方法的默认修饰符(转)

    Java的interface中,成员变量的默认修饰符为:public static final 所以我们在interface中定义成员变量的时候,可以 1:public static final St ...

  10. CF1088F Ehab and a weird weight formula【倍增】

    首先把点权归到边上,设点权较小的一个点是v,也就是(u,v)的边权是log2(dis(u,v))*a[v]+a[v]+a[u] 然后还有一个性质就是这棵树按点权最小点提起来就是一个堆 暴力是n^2的M ...