从实例中学习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栅格布局。

原文地址：https://www.cnblogs.com/sese/p/9111086.html

时间： 2024-07-29 14:31:14

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

css 中的grid布局基础

CSS Grid Layout为CSS引入了一个二维网格系统.网格可用于布局主要页面区域或小型用户界面元素. 网格是一组交叉的水平和垂直线 - 一组定义列,其他行.元素可以放在网格上,以行或者列为标准. grid布局的优点: 1:固定和灵活的轨道尺寸 2:可以使用行号,名称或通过定位网格区域将项目放置在网格上的精确位置.网格还包含一种算法,用于控制未在网格上显示位置的项目的放置. 3:在需要时添加其他行和列 4:网格包含对齐功能,以便我们可以控制项目放置到网格区域后的对齐方式,以及整个网格的对齐

[OpenCV]3 在实例中学习简单函数以及数据读写

实例一 int main() { IplImage* img = cvLoadImage("6085.jpg", 1); IplImage* red = cvCreateImage(cvGetSize(img), img->depth, 1); IplImage* green = cvCreateImage(cvGetSize(img), img->depth, 1); IplImage* blue = cvCreateImage(cvGetSize(img), i

【OpenCV归纳】3 在实例中学习简单函数以及数据读写

【 python 学习笔记 -- OOP】在实例中学习继承(inheritance)和组合(composition)

[面向对象的三大特征]: [封装(encapsulation)]: 通过抽象的类把数据和方法封装起来.实例的数据只能通过public interface(即实例的方法)来获取或操作. [优点]:1. 功能只需在一个地方定义,而不需要在很多地方重复定义 2. 保证对象内部的数据的安全性 3. 当我们想要使用一个方法的时候,我们只需要知道我们用这个方法会返回什么结果,而不需要知道内部到底做了哪些操作来实现的. 就好像我们看电视时想要换频道,只需要按几个按钮,不需要知道要怎么调频. [继承 (in

在微信小程序中学习flex布局

网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的Flex写法. 以下内容主要

Android布局管理器-从实例入手学习相对布局管理器的使用

场景 AndroidStudio跑起来第一个App时新手遇到的那些坑: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/103797243 使用相对布局RelativeLayout实现简单的登录提示的布局,效果如下注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书.教程推送与免费下载. 实现新建之后的默认页面布局为将其修改为Rela

学习ExtJS的grid布局

这是之前学习ExtJS布局的时候我导师让我重点熟悉的内容.之后会发一个最近写的结合MVC项目的grid布局的案例. 上一篇关于ExtJS的学习资料什么的都已经更在上一篇了,这里只是对一些代码的记录. [学习资料](ExtJS4中的Grid.Tree.Form)http://www.cnblogs.com/niejunchan/p/4998512.html [效果] Array_Grid Tree_Grid [代码] [Array_Grid的代码] <!DOCTYPE html> <htm

Expression Blend实例中文教程(3) - 布局控件快速入门Grid

上一篇对Blend 3开发界面进行了快速入门介绍,本篇将基于Blend 3介绍Silverlight控件.对于微软开发工具熟悉的朋友,相信您很快就熟悉Blend的开发界面和控件. XAML概述 Silverlight的控件绘制是由XAML语言进行支持的.什么是XAML语言? 简单的说,XAML(Extensible Application Markup Language )是一款基于XML的描述性语言,中文也叫做可扩展应用程序标记语言. 该语言是由微软开发创建,主要用于构建WPF和Silverl

Android学习笔记(第二篇)View中的五大布局

PS:人不要低估自己的实力,但是也不能高估自己的能力.凡事谦为本... 学习内容: 1.用户界面View中的五大布局... i.首先介绍一下view的概念 view是什么呢?我们已经知道一个Activity是Android的显示层,但是Activity是不能直接显示在屏幕上的,它也像JSP那样,显示的东西是html,那么Android也不例外,Activity是一个抽象的壳子,而显示的东西就是view或者是viewgroup(图形用户组件).... 有了这个概念,我们就清楚view是如何