从实例中学习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的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. ...

随机推荐

Mosquitto ---学习笔记
Mosquitto的安装,可以参见:https://mosquitto.org/download/ [基础配置]Mosquitto服务的配置文件为/etc/mosquitto/mosquitto.co ...
Jmeter----逻辑控制器(Logic Controller)
前言: 1. Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”.意 ...
RGB(FFFFFF)转255:255:255
NSString *color = model.display_color; long colorLong = strtoul([color cStringUsingEncoding:NSUTF8St ...
POJ 1789：Truck History（prim&&最小生成树）
id=1789">Truck History Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17610 ...
Oracle 11gR2数据库使用
1很奇怪,不太懂原理一.Oracle 12c创建用户是出现“ORA-65096: invalid common user or role name”的错误 - CalvinR http://www. ...
Creating the Help Page in ASP.NET Web API
Introduction In this article we will define the process of creating the help page in the ASP .NET We ...
JDK1.5新特性，基础类库篇，调用外部命令类（ProcessBuilder）用法
一. 背景 ProcessBuilder类是用来创建操作系统进程的.与Runtime.exec相比,它提供了更加方便的方法以创建子进程. 每个ProcessBuilder实例管理着一个进程属性的集合. ...
hdu4901The Romantic Hero
#include<iostream> #include<map> #include<string> #include<cstring> #include ...
rzsz安装【转】
环境:CentOS 发生情况:需要安装工具:szrz 工具进行 windows 和linux传文件安装方式:从网上其他教程找的所以就按照如下方式操作 1. 下载软件 rzsz-3.34.tar.gz ...
LeetCode: Maximal Rectangle 解题报告
Maximal RectangleGiven a 2D binary matrix filled with 0's and 1's, find the largest rectangle contai ...

从实例中学习grid布局

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

随机推荐

热门专题