直接 上代码，里面我加注释，相当的简单, 也可以去我的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. java-05 面向对象

    class StudentDemo { String name; int age; String address; public void study(){ System.out.println(&q ...

  2. codevs 3314 魔法森林

    传送门 3314 魔法森林  时间限制: 3 s  空间限制: 256000 KB  题目等级 : 大师 Master 题解   题目描述 Description 为了得到书法大家的真传,小E同学下定 ...

  3. 理解I/O Completion Port(完成端口)

    欢迎阅读此篇IOCP教程.我将先给出IOCP的定义然后给出它的实现方法,最后剖析一个Echo程序来为您拨开IOCP的谜云,除去你心中对IOCP的烦恼.OK,但我不能保证你明白IOCP的一切,但我会尽我 ...

  4. AtCoder Grand Contest 028 A：Two Abbreviations

    题目传送门:https://agc028.contest.atcoder.jp/tasks/agc028_a 题目翻译 给你两个串\(s\)与\(t\),长度分别为\(n,m\).问你存不存在一个串长 ...

  5. 洛谷P3205合唱队——区间DP

    题目:https://www.luogu.org/problemnew/show/P3205 枚举点,分类为上一个区间的左端点或右端点,满足条件便+=即可: 注意不要重复(当l=2时). 代码如下: ...

  6. 重学JAVA基础(三):动态代理

    1.接口 public interface Hello { public void sayHello(); } 2.实例类 public class Hello2 { public void sayH ...

  7. <正则吃饺子>：关于java中对内存部分的简单总结整理

    在项目和一些群讨论中,经常看到对内存的处理,但是,自己确是一知半解的,基于此,就把这部分的知识简单的整理了下,知识点来源于网络博文,也一一标明出处,谢谢. package com.love.malin ...

  8. sublime Text3支持vue高亮，sublime Text3格式化Vue

    第一:让sublime Text3支持Vue高亮 PS:我的sublime版本是3126,我不清楚其它版本的是不是这样设置,不过可以看看思路自己摸索下 1.下载可以让vue格式高亮的插件vue-syn ...

  9. Javascript实现页面左边的菜单选中项高亮显示

    在项目开发过程中,遇到一个问题 在一个模板页面中,Layout.cshtml,页面左边放了一个菜单项menu,每一项都是一个链接到一个新的页面.但所有页面都是用这个模板Layout.cshtml.需要 ...

  10. GPLT天梯赛 L2-022. 重排链表

    L2-022. 重排链表 时间限制 500 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 给定一个单链表 L1→L2→...→Ln-1→Ln,请 ...