CSS grid layout demo 网格布局实例

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

<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>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

原文地址：https://www.cnblogs.com/yuri2016/p/8260146.html

时间： 2024-07-29 21:07:42

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

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

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来. 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了. 同时,CSS Grid 布局也为网页设计行业带来了很大的便利.虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持. 虽然 Flexbox 和 CSS Grid 可

css grid layout简介

为什么我们需要grid布局? 在web发展过程中,诞生了很多精妙的布局方式. 在web 1.0时代,网页只负责静态地展示文字和图片等简单信息,当时流行的是table布局,table布局能够轻而易举地对齐页面内容,而且能兼容各大浏览器.但其也有很大但缺点:1. table用作布局,而不是展示表格数据,使得html语义不明确:2. 要花较大的经历去修改页面内容,比如加一列,就需要修改table每一行html或css,增加维护成本:3. 很难做响应式. 后来css技术壮大,流行趋势转向div+css布

CSS Grid layout布局

CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用grid-template-columns 和 grid-template-rows属性设置网格的列与行的大小,然后使用grid-column 和 grid-row属性将其子元素放入网格之中.目前还处于 W3C 的工作草案之中,并且默认情况下,还不被所有的浏览器所支持.出于示例演示,建议你使用启用了特殊标志的

关于CSS/Grid Layout实例的理解

代码实例来自网络 .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-au

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

2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags/#enable-experimental-web-platform-features 然后,对第一个实验性网络平台功能,点击启用. 然后重启浏览器,然后便能体验到了. 2.Opera 在浏览器中输入:opera://flags/#enable-experimental-web-platform-f

css:grid layout分析

HTML: <div class="wrapper"> <div class="one">One</div> <div class="two">Two</div> <div class="three">Three</div> <div class="four">Four</div> <div c

关于CSS Grid Layout的代码解释

.wrapper { display: grid; /*生成grid类型块级网格*/ grid-template-columns: repeat(3, 1fr); /*设置显示的列网格线,且重复3次1fr,成三列网格,fr可以自动根据网格容器的宽度来计算列的宽度*/ grid-gap: 10px; /*单元格之间有10px的间距*/ grid-auto-rows: minmax(100px, auto); /*设置隐式的行网格线,单元格宽度保持在最小100px,最大auto(即max-conte

前端开发：网格布局

1.前言上一篇文章点击量还不错,为啥评论没有?还有反对的.哎!看来我得反省帖子的质量啦. 老实说,哥也不是很在意这不“和谐”的声音,也许开篇废话太多的缘故吧.我想别人的分享,没有功利性,都是随心情而写. 园子的口号:代码改变世界! 我的原则:我无法来改变你们的看法,但希望得到大家的反馈—不管好坏! 2.说明最近需要加强一下前端知识,所以也就打算总结这些.老实说,我的前端知识也不熟悉,说懂一点吧,也是凑合着安慰自己. 个人的感觉,学什么知识,凭兴趣远没有工作(挣钱)需要逼着学动力强些. 也许有

CSS Grid 网格布局教程

一.概述网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上图这样的布局,就是 Grid 布局的拿手好戏. Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别. Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局.Grid 布局则是将容器划分成"行"