从实例中学习grid布局

对于Web开发者来说，网页布局一直是个比较重要的问题。 Web 布局主要经历了以下四个阶段：

　　1、table表格布局；

　　2、float浮动及position定位布局；

　　3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点 “排列方向”、“对齐方式”，“自适应尺寸”。是目前最为成熟和强大的布局方案；

　　4、grid栅格布局，二维布局模块，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局。随着 CSS Grid 的出现，网格变得更加简单。我们不再需要担心网格中遇到的复杂计算。

下面我们通过几个实例来讲述它的使用方法：

1.实现4列固定宽度的栅格布局，只要在 grid-template-columns 声明中写四次 100px 即可：

.grid {

  display: grid;

  grid-template-columns: 100px 100px 100px 100px;

  grid-column-gap: 20px;

}

2.响应式网格

——方法1：使用fr为单位

.grid-fr {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

    grid-column-gap: 20px;

    min-height: 70px;

    margin-top: 20px;

}

希望 fr 单位每次都创建等宽列，则需要使用 minmax(0, 1fr) 去强制指定它。

.grid-fr_same {

    grid-template-columns: repeat(4, minmax(0, 1fr));

}

——方法2：媒体查询

@media (max-width: 960px) {

    .grid-fr_media {

        grid-template-columns: repeat(2, 1fr);

    }

}

3.基于高度的网格：通过grid + calc 搭配使用

.grid-fr_height {

    height: 500px;

    display: grid;

    grid-template-rows: repeat(4, 1fr);

    grid-auto-columns: calc((500px - 3em) / 4);

    grid-auto-flow: column;

    grid-gap: 1em;

}

.grid-fr_height .grid-item:nth-child(3n) {

    background-color: red;

}

.grid-fr_height .grid-item:nth-child(3n + 2) {

    background-color: orange;

}

4.网格项的放置：

关键字：grid-row（grid-row-star和grid-row-end的缩写），

grid-column（grid-column-star和grid-column-end的缩写）

通过 span 关键字告诉网格项应该占用多少列。

.grid-fr_select .grid-item {

    /* 放在第二列，跨越 2 列 */

    grid-column: 2 / span 2;

    background-color: red;

}

上面所有例子的代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS-grid</title>

        <style>

            .grid {

                display: grid;

                grid-template-columns: 100px 100px 100px 100px;

                grid-column-gap: 20px;

                min-height: 70px;

            }

            .grid-item {

                background-color: #f2f2f2;

                padding: 15px;

            }

            .grid-fr {

                display: grid;

                grid-template-columns: 1fr 1fr 1fr 1fr;

                grid-column-gap: 20px;

                min-height: 70px;

                margin-top: 20px;

            }

            .grid-fr_same {

                grid-template-columns: repeat(4, minmax(0, 1fr));

            }

            .grid-fr_same img {

                max-width: 100%;

            }

            .grid-fr_different {

                grid-template-columns: 1fr 1.618fr 2.618fr;

            }

            @media (max-width: 960px) {

                .grid-fr_media {

                    grid-template-columns: repeat(2, 1fr);

                }

            }

            .grid-fr_height {

                height: 500px;

                display: grid;

                grid-template-rows: repeat(4, 1fr);

                grid-auto-columns: calc((500px - 3em) / 4);

                grid-auto-flow: column;

                grid-gap: 1em;

            }

            .grid-fr_height .grid-item:nth-child(3n) {

                background-color: red;

            }

            .grid-fr_height .grid-item:nth-child(3n + 2) {

                background-color: orange;

            }

            .grid-fr_select .grid-item {

                /* 放在第二列，跨越 2 列 */

                grid-column: 2 / span 2;

                background-color: red;

            }

        </style>

    </head>

    <body>

        <h3>固定宽网格</h3>

        <div class="grid">

            <div class="grid-item">每列的宽度为100px</div>

            <div class="grid-item">每列的宽度为100px</div>

            <div class="grid-item">每列的宽度为100px</div>

            <div class="grid-item">每列的宽度为100px</div>

        </div>

        <h3>响应式网格：方法1：使用fr为单位</h3>

        <div class="grid-fr">

            <div class="grid-item">fr 是代表一个片段的灵活长度单位。</div>

            <div class="grid-item">当你使用 fr 单位时，浏览器会分割开放空间并根据 fr 倍数将区域分配给列。</div>

            <div class="grid-item">使用fr为单位</div>

            <div class="grid-item">使用fr为单位</div>

        </div>

        <h3>使用 fr 单元创建的网格并不总是相等的！</h3>

        <div class="grid-fr">

            <div class="grid-item">

                <img src="img/2.jpg"/>

            </div>

            <div class="grid-item">每个 fr 单位是可用（或剩余）空间的一个小片段。</div>

            <div class="grid-item">如果你的元素比使用 fr 单位创建的任何列都要宽，则需要以不同的方式进行计算。</div>

            <div class="grid-item"></div>

        </div>

        <h3>希望 fr 单位每次都创建等宽列，则需要使用 minmax(0, 1fr) 去强制指定它。</h3>

        <div class="grid-fr grid-fr_same">

            <div class="grid-item">

                <img src="img/2.jpg"/>

            </div>

            <div class="grid-item">通过minmax()函数来创建网格轨道的最小或最大尺寸</div>

            <div class="grid-item">minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。</div>

            <div class="grid-item">可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。</div>

        </div>

        <h3>不等宽网格</h3>

        <div class="grid-fr grid-fr_different">

            <div class="grid-item">只需更改 fr 倍数，就可以创建宽度不等的网格。</div>

            <div class="grid-item">比如：grid-template-columns: 1fr 1.618fr 2.618fr;</div>

            <div class="grid-item">表示：第二列是第一列的 1.618 倍，第三列是第二列的 1.618 倍。</div>

        </div>

        <h3>repeat()</h3>

        <div class="grid-fr">

            <div class="grid-item">repeat()可以创建重复的网格轨道。</div>

            <div class="grid-item">适用于创建相等尺寸的网格项目和多个网格项目。</div>

            <div class="grid-item">repeat()接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。</div>

            <div class="grid-item">比如这个例子就可以写成 grid-template-columns: repeat(4,1fr)</div>

        </div>

        <h3>响应式网格：方法2：媒体查询</h3>

        <div class="grid-fr grid-fr_media">

            <div class="grid-item">使用 @media (min-width: ***) {} 进行断点</div>

            <div class="grid-item">当你使用 fr 单位时，浏览器会分割开放空间并根据 fr 倍数将区域分配给列。</div>

            <div class="grid-item">使用fr为单位</div>

            <div class="grid-item">使用fr为单位</div>

        </div>

        <h3>基于高度的网格</h3>

        <div class="grid-fr_height">

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

            <div class="grid-item"></div>

        </div>

        <h3>网格项的放置</h3>

        <div class="grid-fr grid-fr_select">

            <div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>

            <div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>

            <div class="grid-item">可以通过 span 关键字告诉网格项应该占用多少列。</div>

        </div>

    </body>

</html>

本篇文章是基于新的 CSS 特性正在改变网页设计做的一个简单笔记。更多详细内容可阅读原文。

阅读此文适用于对grid有个初步了解。想要更深入的，可访问 grid栅格布局。

从实例中学习grid布局的更多相关文章

wpf后置代码中的Grid布局以及图片路径的设置
之前用Grid练习连连看布局时,遇到了几个困惑.此次就把当时的一些收获写出来,供以后翻看. 图片路径可能比较常用,所以就写在第一个了. 在xaml中,设置图片非常简单,只要把图片拷贝到资源目录(这里假 ...
图文详解前端CSS中的Grid布局，你真的可以5分钟掌握
前言网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式. 今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式. CSS 第一个Grid布局首先我们看看 ...
css 中的grid布局基础
CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准 ...
web前端——实例中学习css,javascript
最近闲暇时候在研究前端的样式和js,以前都是从w3school上看看那些选择器和DOM操作方法很少去实际做demo来研究,做的过程当中才真切感觉到纸上得来终觉浅,看得懂跟能做出东西完全两码事,尤其在定 ...
在微信小程序中学习flex布局
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就 ...
Android布局管理器-从实例入手学习相对布局管理器的使用
场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797 ...
手把手教你grid布局
概述目前css布局方案中,网格布局可以算得上是最强大的布局方案了.它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局. 基本概念在学习grid布局之前,我们需要了解一些基本概念 1 ...
轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
学习ExtJS的grid布局
这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

随机推荐

MongoDB基本管理命令 [转]
MongoDB基本管理命令 linux下配置安装mongodb 10分钟玩转mongoDB 官网安装教程使用命令行方式连接mongodb: mongo /admin -u用户名 -p密码 --连接 ...
深入理解Java：自定义java注解
要深入学习注解,我们就必须能定义自己的注解,并使用注解,在定义自己的注解之前,我们就必须要了解Java为我们提供的元注解和相关定义注解的语法. 元注解: 元注解的作用就是负责注解其他注解.Java5. ...
基于HTTP在互联网传输敏感数据的消息摘要、签名与加密方案
基于HTTP在互联网传输敏感数据的消息摘要.签名与加密方案博客分类: 信息安全 Java 签名加密AESMD5HTTPS 一.关键词 HTTP,HTTPS,AES,SHA-1,MD5,消息摘要,数 ...
转生成 HTMLTestRunner 测试报告
转自:http://www.cnblogs.com/hero-blog/p/4128575.html 04.生成 HTMLTestRunner 测试报告 1.HTMLTestRunner 是 P ...
[Android开发那点破事]解决android.os.NetworkOnMainThreadException
[Android开发那点破事]解决android.os.NetworkOnMainThreadException 昨天和女朋友换了手机,我的iPhone 4S 换了她得三星I9003.第一感觉就是好卡 ...
C语言笔记本
在此记录一些常见的C语言错误,可以当作学习C语言的笔记,需要的时候可以回过头看看. 1.关于“++” #include int main() { int a,b,cd; a=10; b=a++; c= ...
Unix环境高级编程(十四)守护进程实现时间服务器
守护进程是在后台运行不受终端控制的进程(如输入.输出等),一般的网络服务都是以守护进程的方式运行.守护进程脱离终端的主要原因有两点:(1)用来启动守护进程的终端在启动守护进程之后,需要执行其他任务.( ...
Ext4文件系统架构分析(三)
ioctl源码分析之交换两个文件的物理extents 1. 交换两个文件的extents Ext4 的EXT4_IOC_MOVE_EXT命令用于交换两个文件的extents,实际上是交换两个文件的对应 ...
Python fabs() 函数
描述 fabs() 方法返回数字的绝对值,如math.fabs(-10) 返回10.0. fabs() 函数类似于 abs() 函数,但是他有两点区别: abs() 是内置函数. fabs() 函数在 ...
swfupload详解
前提: Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame,较Ajax要麻烦许多,而且其提交方式依然在底层是 ...

从实例中学习grid布局

从实例中学习grid布局的更多相关文章

随机推荐

热门专题