直接 上代码，里面我加注释，相当的简单, 也可以去我的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. 「JLOI2011」「LuoguP4568」飞行路线（分层图最短路

    题目描述 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在nn个城市设有业务,设这些城市分别标记为00到n-1n−1,一共有mm种航线,每种航线连接两个城市,并且 ...

  2. vijos:P1285佳佳的魔法药水

    背景 发完了k张照片,佳佳却得到了一个坏消息:他的MM得病了!佳佳和大家一样焦急万分!治好MM的病只有一种办法,那就是传说中的0号药水……怎么样才能得到0号药水呢?你要知道佳佳的家境也不是很好,成本得 ...

  3. shell中利用ftp 上传文件夹功能

    我们知道ftp 只能用来上传或者下载文件,一次单个或者多个,怎么实现将文件夹的上传和下载呢? 可以利用先在remote ip上建立一个相同的文件夹目录,然后将文件放到各自的目录中去 1.循环遍历出要上 ...

  4. python中列表元组字符串相互转换

    python中有三个内建函数:列表,元组和字符串,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示: >>> s = "xxxxx ...

  5. java.lang.ClassCastException:android.widget.Button cannot be cast to android.widget.ImageView

    今天遇到一个错误也不知道怎么回事,上网搜了一下: 出现的问题是:java.lang.ClassCastException:android.widget.Button cannot be cast to ...

  6. Python文件运行时报TabError: inconsistent use of tabs and spaces in indentation

    1. 问题描述 Python文件运行时报TabError: inconsistent use of tabs and spaces in indentation 2. 问题原因 tab 和 space ...

  7. 如何增加新的PointT类型

    博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=286 为了增加新的point类型,首先需要进行定义,例如: struct M ...

  8. Struts2返回JSON数据的具体应用范…

    Struts2返回JSON数据的具体应用范例 博客分类: Struts2 Struts2JSON  早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具 ...

  9. 《精通Spring4.X企业应用开发实战》读后感第四章

  10. eos表结构总结说明

    EOS6.0 WORKFLOW 表结构说明 流程定义表(WFProcessDefine) 名称 代码 描述 流程定义ID processDefID 主键 流程定义名称 processDefName 业 ...