【CSS in Depth 2 精译_031】5.3 Grid 网格布局的两种替代语法

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局(已完结)
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局 ✔️
    • 5.1 构建基础网格(已完结)
    • 5.2 网格结构剖析 (上篇,已完结)
      • 5.2.1 网格线的编号(下篇,已完结)
      • 5.2.2 网格与 Flexbox 配合(下篇,已完结)
    • 5.3 两种替代语法 ✔️
      • 5.3.1 命名网格线 ✔️
      • 5.3.2 命名网格区域 ✔️
    • 5.4 显式网格与隐式网格(精译中 ⏳)

文章目录

    • 5.3 两种替代语法 Alternate syntaxes
      • 5.3.1 命名网格线 Naming grid lines
      • 5.3.2 命名网格区域 Naming grid areas

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
上一节我们学习了网格线的编号和页面元素与网格单元的定位方法,然后探讨了网格布局与 Flexbox 布局的区别与联系。这一节再来看看网格布局的另外两种灵活且强大的写法。

5.3 两种替代语法 Alternate syntaxes

布局网格元素还有另外两个替代语法:命名网格线与命名网格区域,具体选用哪种写法视个人喜好而定。在某些设计中,一种语法可能较另一种更好理解。本节将分别介绍这两种语法。

5.3.1 命名网格线 Naming grid lines

有时候记录所有网格线的编号未免过于繁琐,尤其是在网格轨道很多的时候。为了能简单点,可以给网格线命名,并在布局时使用该名称而非其编号。定义网格轨道时,可以在任意两个轨道间添加一对中括号,写上网格线的名称,如以下代码片段所示:

grid-template-columns: [start] 2fr [center] 1fr [end];

这条声明定义了一个双列布局的网格,同时命名了三条垂直网格线,分别为 startcenterend。之后就可以用这些名称来声明网格元素放置的位置,不用再去数网格编号了。例如:

grid-column: start / center;

上述声明将网格元素放置在了 1 号网格线(即 start)与 2 号网格线(即 center)这间的区域。此外,同一网格线还可以有多个名称,如以下声明所示(这里对代码做了换行处理,以增强可读性):

grid-template-columns:[left-start] 2fr[left-end right-start] 1fr[right-end];

该声明中,2 号网格线既叫作 left-end 又叫作 right-end,使用时任选其一即可。这里还有一个设置技巧:将网格线命名为 left-startleft-end,相当于定义了一个位于二者之间的、名称为 left 的区域。这里的后缀 -start-end 某种意义上充当了声明该区域的关键字。如果给网格元素设置 grid-column: left,则指定了一个从网格线 left-start 延展到 left-end 的区域。

使用命名网格线来布局示例页的新样式代码,如代码清单 5.6 所示,效果与代码清单 5.4 相同。按以下代码更新示例页面:

代码清单 5.6 使用命名网格线实现的网格布局代码

.container {display: grid;grid-template-columns:/* 分别给每条垂直网格线命名 */[left-start] 2fr[left-end right-start] 1fr[right-end];/* 将水平网格线命名为 row */grid-template-rows: repeat(4, [row] auto);gap: var(--gap-size);max-inline-size: 1080px;margin-inline: auto;
}header,
nav {grid-column: left-start / right-end;grid-row: span 1;
}.main {grid-column: left; /* 跨越 left-start 到 left-end 之间的区域 */grid-row: row 3 / span 2; /* 从第三个命名网格线 row 开始放置元素,并跨越两个网格轨道 */
}.sidebar-top {grid-column: right; /* 跨越 right-start 到 right-end 之间的区域 */grid-row: 3 / 4;
}.sidebar-bottom {grid-column: right; /* 跨越 right-start 到 right-end 之间的区域 */grid-row: 4 / 5;
}

上述样式利用手动命名的垂直网格线,将每一个元素放置在相应的网格列内;而水平网格线的命名则是由 repeat() 函数实现的,最终这些水平网格线除了最后一条外,其余都被命名为了 row。这看起来可能很奇怪,但像这样重复使用同一个名称来命名也是有效的。这样一来,main 元素就被放置在了从 row 3 开始的位置(即第三条名为 row 的水平网格线),并由此(沿垂直编码方向向下)跨越两个网格轨道。

DIY 补充说明:关于 repeat(4, [row] auto) 的含义

根据命名网格线的定义,具体的名称要写在任意两个网格轨道之间,所以这里的 repeat(4, [row] auto) 展开后相当于 [row] auto [row] auto [row] auto [row] auto。由此可见,repeat() 函数定义了四个网格轨道行,每行宽度均为 auto,并且每行“顶部”的那条网格线都被命名为了 row。起初学到这里时,我曾将 auto 理解成了网格线名称的默认值,是不对的。正确的理解是将 auto 视为网格轨道。如下图 Chrome 浏览器的开发者工具所标注的网格所示:

补图1 除了最后一条水平网格线,其余都被命名为 “row”

补图1 除了最后一条水平网格线,其余都被命名为 “row”


补图2 实测 Chrome 浏览器对左上角两个不同方向的命名网格线分别做了标注,并用箭头符号加以区分

补图2 实测 Chrome 浏览器对左上角两个不同方向的命名网格线分别做了标注,并用箭头符号加以区分

命名网格线的用法数不胜数,具体怎么用,还要结合每个网格特定的结构才能确定。比如实现一个如图 5.10 所示的布局效果:

图 5.10 网格元素放置的位置为:从第二个名为“col”的网格线开始,向右横跨两个网格轨道的位置(即 col 2 / span 2)

图 5.10 网格元素放置的位置为:从第二个名为“col”的网格线开始,向右横跨两个网格轨道的位置(即 col 2 / span 2)

该场景展示了另一种重复模式的写法:网格列按每两列为一组,然后对每组前方那条垂直网格线统一命名(即 grid-template-columns: repeat(3, [col] 1fr 1fr)),接着再用命名的网格线将元素定位到第二组网格列上(即 grid-column: col 2 / span 2)。

5.3.2 命名网格区域 Naming grid areas

另一个替代语法是对网格区域进行命名。该语法既不用去数网格线的编号,也不用对网格线命名;定位元素时直接将其关联到命名的网格区域中即可。使用时需要借助另外两个属性的共同参与,即 网格容器grid-template-area 属性和 网格元素grid-area 属性。

代码清单 5.7 给出了该写法的一个示例。最终的布局效果还是跟之前的示例页(即代码清单 5.4 和 5.6)完全一样。它是一种替代语法。根据如下代码更新示例页:

代码清单 5.7 使用命名的网格区域

.container {display: grid;grid-template-areas:/* 将每个网格单元分配到一个命名的网格区域中 */"title title"      "nav   nav"        "main  aside1"     "main  aside2";    grid-template-columns: 2fr 1fr; /* 跟之前一样定义网格轨道的尺寸大小 */grid-template-rows: repeat(4, auto); /* 跟之前一样定义网格轨道的尺寸大小 */grid-gap: var(--gap-size);max-inline-size: 1080px;margin-inline: auto;
}header {grid-area: title; /* 将每个网格元素放到一个命名的网格区域 */
}nav {grid-area: nav; /* 将每个网格元素放到一个命名的网格区域 */
}.main {grid-area: main; /* 将每个网格元素放到一个命名的网格区域 */
}.sidebar-top {grid-area: aside1; /* 将每个网格元素放到一个命名的网格区域 */
}.sidebar-bottom {grid-area: aside2; /* 将每个网格元素放到一个命名的网格区域 */
}

grid-template-area 属性使用了一种类似 ASCII 字符画风格(ASCII art 的语法,可以直接在 CSS 中绘制出一个可视化的网格示意图。声明中给出了一系列带引号的字符串,每个字符串分别代表网格中的某一行,其中各列则用空格分隔。

本例中,第一行全部分给了网格区域 title,第二行则给了 nav;接下来的两行,左边一列分给了主区域 main,右边侧边栏的两个子板块则分别分配给了 aside1aside2。就这样,每个网格元素通过 grid-area 属性被放置到了对应的命名区域中。

警告

每个命名的网格区域必须组成一个矩形,CSS 不允许出现更复杂的形状,例如 L 形或 U 形。

还可以用句点(.)作为名称,这样就能空出相应的网格单元。例如下面的样式声明,其中定义了四个网格区域,它们都环绕在中间那个留白的网格单元周围:

grid-template-areas:"top  top    right""left .      right""left bottom bottom";

鉴于网格布局设计了三种语法,即带编号的网格线、命名网格线、命名网格区域,在构建网格布局时,就选那个用得最顺手的语法即可。最后一个是众多开发者的最爱,特别是在明确知道每个网格元素的位置的情况下,这种写法的优势尤为明显。



关于《CSS in Depth》(中译本书名《深入解析 CSS》)

第 1 版第 2 版
读者评分原版:4.7(亚马逊);中文版:9.3(豆瓣)原版:5.0(亚马逊);中文版:暂无,待出版
出版时间原版:2018 年 3 月;中文版:2020 年 4 月原版:2024 年 7 月;中文版:暂无,待出版
原价原版:$44.99;中文版:¥139.00原版:$59.99;中文版:暂无,待出版
现价原版:$36.49;中文版:¥52.54 起步原版:$52.09;中文版:暂无,待出版
原版国内预订起步价 ¥461.00起步价 ¥750.00

本专栏为该书第 2 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完成全书翻译,敬请期待!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/54138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Corrupt block relative dba: 0x02c0b382 (file 11, block 45954)

接前面断电故障处理2:oracle数据库断电无法启动恢复-CSDN博客 DM00 started with pid145, OS id16516, job SYS.SYS_IMPORT_TABLE_01 2024-09-13T20:05:22.33130208:00 ADVISORY: Please collect redo for investigation of ORA-8103. Use command: ALTER SYSTE…

计算机毕业设计 扶贫助农系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

浅谈人工智能之基于ollama本地大模型结合本地知识库搭建智能客服

浅谈人工智能之基于ollama本地大模型结合本地知识库搭建智能客服 摘要 随着人工智能技术的飞速发展,基于大型语言模型(LLMs)的智能客服系统逐渐成为提升企业服务质量和效率的关键工具。然而,对于注重数据隐私和安全的企业而言,使用云服务可能会引发数据泄露的风险。因此…

基于微信小程序的图书馆预约占座系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的图…

(k8s)kubernetes 挂载 minio csi 的方式(pod挂载pvc存在csi驱动问题,挂载不上)

一、安装Minio(Minio分布式集群搭建部署_minio集群最少几台-CSDN博客) 生成accessKeyID和secretAccessKey: 二、安装csi-s3插件(在k8s集群上) 首先我们把插件的yaml文件都下载下来,为了保证版本测试的一致性,我们下载…

前端面试常考算法

快速排序 #include<iostream> #include<cstdio> using namespace std; const int N 100005; int a[N];void quick_sort(int a[], int l, int r) {if (l > r) return;int x a[l r >> 1];int i l - 1, j r 1;while (i < j) {while (a[i] < x);…

使用 C++ 过滤文件中的纯英文字符串

在处理多语言文本数据时&#xff0c;经常会遇到需要过滤掉非目标语言字符串的情况。例如&#xff0c;你可能有多个文件&#xff0c;每个文件中存放了不同语言的字符串&#xff0c;但这些文件中都混杂了一些纯英文的字符串。本文将介绍如何使用 C 实现只获取每个文件中的纯英文字…

什么是 PHP? 为什么用 PHP? 谁在用 PHP?

一、什么是 PHP&#xff1f; PHP&#xff08;Hypertext Preprocessor&#xff0c;超文本预处理器&#xff09;是一种广泛应用于 Web 开发的通用开源脚本语言。 PHP 主要用于服务器端编程&#xff0c;可以嵌入 HTML 中&#xff0c;与数据库进行交互&#xff0c;生成动态网页内容…

FreeRTOS—任务通知

一&#xff0c;概念介绍 队列、信号量、事件组等IPC技术都需要创建一个中间对象进程之间通过这些中间对象进行通讯或同步。创建对象就需要分配内存&#xff0c;占用一定内存。 二&#xff0c;任务通知的特点&#xff1a; 一个任务或ISR向另外一个指定的任务发送通知&#xff0c…

微信小程序中的模块化、组件化开发:完整指南

文章目录 前言一、模块化与组件化开发的优势1.1模块化开发的优势1.2 组件化开发的优势 二、组件的抽离标准及规范2.1 抽离组件的标准2.2 组件化开发规范 三、模块化规范的种类及优劣比较3.1 CommonJS3.2 ES6 Modules3.3 优劣对比 四、组件封装&#xff1a;全局组件、分包组件、…

浅谈树型结构——树

文章目录 一、什么是树&#xff1f;二、树的特点三、树的概念四、树的表示形式五、树的应用 一、什么是树&#xff1f; 树是一种 非线性 的数据结构&#xff0c;是树型结构。是一个由n个有限结点组成的一个具有层次关系的集合&#xff0c;这种集合因为看起来像一颗倒挂的树&am…

波克城市 x NebulaGraph|高效数据血缘系统在游戏领域的构建实战

关于波克城市和作者‍‍ 波克城市&#xff0c;一家专注于研发精品休闲游戏的全球化公司&#xff0c;连续七年入选中国互联网综合实力百强&#xff0c;2023 年位列 17 位。波克城市旗下拥有《捕鱼达人》《猫咪公寓2》等精品休闲游戏&#xff0c;全球注册用户超 5 亿&#xff0c;…

系统架构师---介绍ER图

E-R图&#xff0c;全称为Entity-Relationship Diagram&#xff0c;即实体联系图或实体关系图&#xff0c;是一种用于描述数据库中实体及其关系的数据建模工具。它是数据库设计中的重要概念模型&#xff0c;通过图形化的方式展示了实体、属性和它们之间的关系&#xff0c;帮助开…

借老系统重构我准备写个迷你版apiFox

前段时间一直在忙公司老系统重构的方案设计&#xff0c;其中最大的重构点就是前后端分离。为了加快前后端协同开发和对接的工作效率&#xff0c;我决定写一个公司内部使用的迷你版的apiFox。 文章目录 有现成的工具为啥不用现有成熟方案初步成果展示下一步计划 有现成的工具为啥…

Kafka+PostgreSql,构建一个总线服务

之前开发的系统&#xff0c;用到了RabbitMQ和SQL Server作为总线服务的传输层和存储层&#xff0c;最近一直在看Kafka和PostgreSql相关的知识&#xff0c;想着是不是可以把服务总线的技术栈切换到这个上面。今天花了点时间试了试&#xff0c;过程还是比较顺利的&#xff0c;后续…

华为CNA VRM搭建(使用vmware worfstartion搭建)

创建虚拟机&#xff1a; 自定义→高级 选择硬件兼容性&#xff1a;默认安装版本&#xff0c;如果未来想要将此虚拟机安装到其他电脑&#xff0c;其他电脑版本过低&#xff0c;此时可以向下兼容&#xff0c;这里我们默认版本 稍后安装操作系统&#xff1a; CNA采用Euler OS系统…

MySQL练手题--体育馆的人流量(困难)

一、准备工作 Create table If Not Exists Stadium (id int, visit_date DATE NULL, people int); Truncate table Stadium; insert into Stadium (id, visit_date, people) values (1, 2017-01-01, 10); insert into Stadium (id, visit_date, people) values (2, 2017-01-02…

springboot luttuc redis 集成protobuf,手动序列化反序列化

前置需知&#xff1a; 1.本文章和网上大部分博客配置不太一样&#xff0c;各位看官要分析一下自己的需求。集成protobuf 本文章主要是手动调用protobuf的序列化方法&#xff0c;而不是交由springboot 去做&#xff0c;会偏向原生java 使用方式 2.由于为了和公司其他的项目达成…

如何修改BP神经网络的传递函数

BP神经网络每种传递函数都有自己的特点,输入输出值不同,线性和非线性不同,对于有些模型,需要做出有针对性的调整,需要自定义传递函数,这是修改的原因之一,有些模型,数据有一定的物理意义,或者其他特殊要求,有些因子需要单独处理,这个时候也需要自定义传递函数,这是…

HTML + CSS - 网页布局之一般布局浮动布局

1. 一般布局 1.1 一般布局相关参数 元素内容常常可以想像为放在一个盒子里&#xff0c;然后在周边加上内边距&#xff0c;边框和外边距&#xff0c;是盒子模型 默认一个块级区域会填充父类所有的行向空间&#xff0c;并且沿着块伸长容纳其内容&#xff0c;可以为块状体设置某…