当前位置： 首页 > news >正文

【CSS in Depth 2 精译_029】5.2 Grid 网格布局中的网格结构剖析（上）

news 2025/9/16 14:55:12

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

  • 第一章 层叠、优先级与继承（已完结）
    • 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.2 网格结构剖析

译者按
上一节，我们通过一个 2行 × 3列 的简单网格了解了网格布局中的两个核心概念 —— 网格容器（grid container）和网格元素（grid items），并认识了一个新的尺寸单位 fr（表示 fraction unit，即分数单位）。这一节，作者将结合上一章 Flexbox 布局使用的示例页，对网格布局的结构进行抽丝剥茧的深入讲解，一起来看看吧（由于内容相对较多，拟分为上篇、下篇两个部分发表，本篇为上篇）。

5.2 网格结构剖析

了解网格的各个部分非常重要。前面已经学习了 网格容器 和 网格元素，它们是网格布局的基本要素。还有四个重要概念如图 5.3 所示：

  • 网格线（grid line）：网格线构成了网格的框架结构，分水平网格线和垂直网格线两种，分别位于某行或某列的任意一侧。如果指定了间隙 gap，那间隙就在网格线上。
  • 网格轨道（grid track）：它是两条相邻网格线之间的空间。网格可以有多个水平轨道（多行），以及多个垂直轨道（多列）。
  • 网格单元（grid cell）：它是网格上的一块单独空间，是水平和垂直网格轨道交叉重叠的部分。
  • 网格区域（grid area）：它是网格上的矩形区域，由一个或多个网格单元组成；该区域位于两条垂直网格线和两条水平网格线之间。

图 5.3 网格的组成部分

图 5.3 网格的组成部分

构建网格布局时会涉及到这些组成部分。例如，声明 grid-template-columns: 1fr 1fr 1fr 就能定义三个等宽且垂直的 网格轨道，同时还定义了四条垂直的的 网格线：一条位于网格的最左边；另外两条位于每个网格轨道之间，还有一条则位于网格的最右边。

上一章我们用 Flexbox 构建过一个示例页。不妨再回过头去看看当时的设计，考虑一下该怎样用网格布局再来实现一版。总体设计如图 5.4 所示，虚线标出了每个网格单元的位置。注意，某些区域跨越了好几个网格单元，即填充了更大的 网格区域。

图 5.4 用网格创建的网页布局效果图。虚线标出了每个网格单元的位置

图 5.4 用网格创建的网页布局效果图。虚线标出了每个网格单元的位置

上面的网格布局包含四行两列，其中前两个水平网格轨道分别是页面标题（Ink）部分和主导航菜单部分。主区域填满了第一个垂直轨道剩余的两个网格单元，而侧边栏的两个板块则分置于第二个垂直轨道剩余的两个网格单元内。

说明

布局设计无需填满每一个网格单元。在想留白的地方空出对应的网格单元即可。

使用 Flexbox 布局时，必须按照一定的方式去嵌套元素。第 5 章我们先用 Flexbox 定义了两列，然后在右侧边栏嵌套了另一个 Flexbox 来定义两个子板块所在的行（详见代码清单 5.1）。要用网格实现同样的布局效果，就得改改页面的 HTML 结构：将嵌套的 HTML 拉平，使得放置在网格内的每个页面元素都必须是主网格容器（main grid container）的子元素。新的 HTML 标记如代码清单 5.3 所示。创建一个新页面，并按以下代码更新页面内容（或者直接修改第五章中的示例页）。

代码清单 5.3 网格布局对应的 HTML 结构

<body><div class="container"><!-- 这里的“容器”即网格容器 --><header><!-- 每个网格元素都必须是网格容器的子元素 --><h1 class="page-heading">Ink</h1></header><nav><!-- 每个网格元素都必须是网格容器的子元素 --><ul class="site-nav"><li><a href="/">Home</a></li><li><a href="/features">Features</a></li><li><a href="/pricing">Pricing</a></li><li><a href="/support">Support</a></li><li class="nav-right"><a href="/about">About</a></li></ul></nav><main class="main tile"><!-- 每个网格元素都必须是网格容器的子元素 --><h1>Team collaboration done right</h1><p>Thousands of teams from all over theworld turn to <b>Ink</b> to communicateand get things done.</p></main><div class="sidebar-top tile"><!-- 每个网格元素都必须是网格容器的子元素 --><form class="login-form"><h3>Login</h3><p><label for="username">Username</label><input id="username" type="text"name="username"/></p><p><label for="password">Password</label><input id="password" type="password"name="password"/></p><button type="submit">Login</button></form></div><div class="sidebar-bottom tile centered stack"><!-- 每个网格元素都必须是网格容器的子元素 --><small>Starting at</small><div class="cost"><span class="cost-currency">$</span><span class="cost-dollars">20</span><span class="cost-cents">.00</span></div><a class="cta-button" href="/pricing">Sign up</a></div></div>
</body>

新版页面将所有内容区域都变成了网格元素：标题、菜单（nav）、主区域外加两个侧边栏。主区域和两个侧边栏都加上了 tile 样式类，因为它们都是白色背景，也有相同的内边距。

接着对新页面应用网格布局，并将各部分内容指定到对应区域。稍后我们将基于第五章的这版示例页引入大量新的样式，现在不妨先看看网格生效后的页面渲染情况，如图 5.5 所示。

图 5.5 基础网格布局生效后的示例页效果图

图 5.5 基础网格布局生效后的示例页效果图

然后新建一张样式表，并关联到该页面。样式内容如代码清单 5.4 所示：

代码清单 5.4 最外层设置的网格布局样式

*,
::before,
::after {box-sizing: border-box;
}:root {--gap-size: 1.5rem;
}body {background-color: #709b90;font-family: Helvetica, Arial, sans-serif;
}.stack > * + * {margin-block-start: 1.5em;
}.container {display: grid;grid-template-columns: 2fr 1fr;  /* 定义两个垂直的网格轨道 */grid-template-rows: repeat(4, auto);  /* 定义四个大小为 auto 水平网格轨道 */gap: var(--gap-size);max-inline-size: 1080px;   margin-inline: auto;
}header,
nav {grid-column: 1 / 3;  /* 垂直网格线从1号线跨越至3号线 */grid-row: span 1;  /* 恰好跨越一条水平轨道 */
}.main {/* 将其他网格元素定位到不同的网格线之间 */grid-column: 1 / 2;grid-row: 3 / 5;
}.sidebar-top {/* 将其他网格元素定位到不同的网格线之间 */grid-column: 2 / 3;grid-row: 3 / 4;
}.sidebar-bottom {/* 将其他网格元素定位到不同的网格线之间 */grid-column: 2 / 3;grid-row: 4 / 5;
}.tile {padding: 1.5em;background-color: #fff;
}.tile > :first-child {margin-top: 0;
}

这段样式代码引入了很多新的写法，下面来逐个击破——

首先对 .container 设置了网格容器，并用 grid-template-columns 和 grid-template-rows 定义了网格轨道。因为列的分数单位分别为 2fr 和 1fr，所以第一列的宽度是第二列的两倍。定义行的时候用到了一个新方法，即 repeat() 函数，用于简化多个网格轨道的声明。

声明 grid-template-rows: repeat(4, auto) 定义了四个高度为 auto 的水平网格轨道。这种写法相当于声明 grid-template-rows: auto auto auto auto 。轨道大小指定为 auto，表示轨道尺寸将根据自身内容进行调整。

repeat() 简化表示法还可以用来定义不同的重复模式，比如 repeat(3, 2fr 1fr) 会重复三遍 2fr 1fr，从而定义出六个网格轨道，重复的结果为 2fr 1fr 2fr 1fr 2fr 1fr，效果如图 5.6 所示。

图 5.6 在网格模板定义里使用 repeat() 函数定制重复模式示意图

图 5.6 在网格模板定义里使用 repeat() 函数定制重复模式示意图

还可以将 repeat() 作为更长的模式的一部分进行简化。例如，grid-template-columns: 1fr repeat(3, 3fr) 1fr 定义了一个 1fr 宽的列，后面是连续三个宽度为 3fr 的列，最后又是一个宽 1fr 的列（即 1fr 3fr 3fr 3fr 1fr）。不难发现，完整版的模板定义乍一看未必直观，因此才有了 repeat() 这样的简化写法。

相关文章：

【CSS in Depth 2 精译_029】5.2 Grid 网格布局中的网格结构剖析（上）

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…...

编程日记 2024/9/15 20:36:21

ZYNQ LWIP（RAW API） TCP函数学习

1 LWIP TCP函数学习 tcp_new()–新建控制块 这个函数用于分配一个TCP控制块，它通过tcp_alloc()函数分配一个TCP控制块结构来存储TCP控制块的数据信息， 如果没有足够的内容分配空间，那么tcp_alloc()函数就会尝试释放一些不太重要的TCP控制块， 比如就会释放处于TIME_WAIT、C…...

编程日记 2024/9/15 20:35:19

Spring Boot，在应用程序启动后执行某些 SQL 语句

在 Spring Boot 中&#xff0c;如果你想在应用程序启动后执行某些 SQL 语句&#xff0c;可以利用 spring.sql.init 属性来配置初始化脚本。这通常用于在应用启动时创建数据库表、索引、视图等&#xff0c;或者填充默认数据。data-locations 和 schema-locations 指定了 SQL 脚本…...

编程日记 2024/9/15 20:33:17

【SQL】百题计划：SQL最基本的判断和查询。

[SQL]百题计划 Select product_id from Products where low_fats "Y" and recyclable "Y";...

编程日记 2024/9/15 20:30:15

04_Python数据类型_列表

Python的基础数据类型 数值类型&#xff1a;整数、浮点数、复数、布尔字符串容器类型&#xff1a;列表、元祖、字典、集合 列表 列表&#xff08;List&#xff09;是一种非常灵活的数据类型&#xff0c;它可以用来存储一系列的元素。容器类型&#xff0c;能够存储多个元素的…...

编程日记 2024/9/15 20:29:14

F5设备绑定EIP

公网IP 公网IP&#xff08;Public IP Address&#xff09;是指可以直接在互联网上访问的IP地址&#xff0c;用于标识网络上的设备或主机。它允许外部网络访问您的云服务器&#xff0c;如提供远程登录服务、访问Web服务器等。然而&#xff0c;这并不意味着公网IP不需要路由。 …...

编程日记 2024/9/15 20:27:12

使用 PyCharm 新建 Python 项目详解

使用 PyCharm 新建 Python 项目详解 文章目录 使用 PyCharm 新建 Python 项目详解一 新建 Python 项目二 配置环境1 项目存放目录2 Python Interpreter 选择3 创建隔离环境4 选择你的 Python 版本5 选择 Conda executable 三 New Window 打开项目四 目录结构五 程序编写运行六 …...

编程日记 2024/9/15 20:26:11

从0开始学习 RocketMQ：分布式事务消息的实现

消息队列中的事务&#xff0c;主要是解决消息生产者和消息消费者数据一致性的问题。 应用场景 比如订单系统创建订单后&#xff0c;会发消息给购物车系统&#xff0c;将已下单的商品从购物车中删除。 由于购物车删除商品这一步骤并不是用户下单支付这个主流程中的核心步骤&a…...

编程日记 2024/9/15 20:24:09

MySQL 查询数据库的数据总量

需求&#xff1a;查看MySQL数据库的数据总量&#xff0c;以MB为单位展示数据库占用的磁盘空间 实践&#xff1a; 登录到MySQL数据库服务器。 选择你想要查看数据总量的数据库&#xff1a; USE shield;运行查询以获取数据库的总大小&#xff1a; SELECT table_schema AS Datab…...

编程日记 2024/9/15 20:23:04

[C++]——vector

&#x1f307;个人主页&#xff1a;_麦麦_ &#x1f4da;今日小句&#xff1a;快乐的方式有很多种&#xff0c;第一种便是见到你。 目录 一、前言 二、vector的介绍及使用 2.1 vector的介绍 2.2 vector的使用 2.2.1 vector的定义&#xff08;构造函数&#xff09; 2.2.2…...

编程日记 2024/9/15 20:21:03

自动驾驶：LQR、ILQR和DDP原理、公式推导以及代码演示（七、CILQR约束条件下的ILQR求解）

&#xff08;七&#xff09;CILQR约束条件下的ILQR求解 CILQR&#xff08;(Constrained Iterative Linear Quadratic Regulator)&#xff09; 是为了在 iLQR 基础上扩展处理控制输入和状态约束的问题。在这种情况下&#xff0c;系统不仅要优化控制输入以最小化代价函数&#x…...

编程日记 2024/9/15 20:20:01

随想录笔记-二叉树练习题

合并二叉树 617. 合并二叉树 - 力扣&#xff08;LeetCode&#xff09; dfs递归 class Solution {public TreeNode mergeTrees(TreeNode root1, TreeNode root2) {if(root1null||root2null){return root1null?root2:root1;}return dfs(root1,root2);}public TreeNode dfs(Tre…...

编程日记 2024/9/15 20:18:59

华雁智科前端面试题

1. var 变量的提升 题目&#xff1a; var a 1 function fun() {console.log(b)var b 2 } fun() console.log(a) 正确输出结果&#xff1a;undefined、1答错了&#xff0c;给一个大嘴巴子&#xff0c;错误答案输出结果为&#xff1a;2,1 此题主要考察 var 定义的变量&…...

编程日记 2024/9/15 20:12:54

【iOS】单例模式

【iOS】单例模式 什么是单例模式&#xff1f; 定义 单例模式&#xff0c;简单地说就是一个类只对应一个对象&#xff0c;每次使用这个类时&#xff0c;都只能获取到那一个对象。它的详细定义如下&#xff1a; 如果一个类始终只能创建一个实例&#xff0c;则这个类被称为单例…...

编程日记 2024/9/15 20:09:52

Linux | 探索 Linux 信号机制：信号的产生和自定义捕捉

信号是 Linux 操作系统中非常重要的进程控制机制&#xff0c;用来异步通知进程发生某种事件。理解信号的产生、阻塞、递达、捕捉等概念&#xff0c;可以帮助开发者更好地编写健壮的应用程序&#xff0c;避免由于未处理的信号导致程序异常退出。本文将带你从基础概念开始&#x…...

编程日记 2024/9/15 20:08:51

递归的时间复杂度分析

确定回溯算法的时间复杂度通常比较复杂&#xff0c;因为它取决于搜索空间的大小以及你的剪枝效率。对于生成从1到n的所有长度为k的组合。分析这类算法的时间复杂度时&#xff0c;我们通常需要考虑递归树的所有可能路径。 组合数 生成的组合数量是从n个元素中选择k个的组合数&…...

编程日记 2024/9/15 20:05:48

C++: 二叉树进阶面试题

做每件事之前都心存诚意, 就会事半功倍. 目录 前言1. 根据二叉树创建字符串2. 二叉树的层序遍历Ⅰ3. 二叉树的层序遍历Ⅱ4. 二叉树的最近公共祖先5. 二叉搜索树与双向链表6. 根据一棵树的前序遍历与中序遍历构造二叉树7. 根据一棵树的中序遍历与后序遍历构造二叉树8. 二叉树的…...

编程日记 2024/9/15 20:03:45

【HarmonyOS NEXT】实现网络图片保存到手机相册

【问题描述】 给定一个网络图片的地址&#xff0c;实现将图片保存到手机相册 【API】 phAccessHelper.showAssetsCreationDialog【官方文档】 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-photoaccesshelper-V5#showassetscreationdialog…...

编程日记 2024/9/15 20:02:44

Pytorch详解-数据模块

Pytorch详解-数据模块 torch.utils.data.Dataset数据交互模块—Dataset的功能示例系列APIsconcatSubsetrandom_splitsampler unsqueeze DataLoaderDataLoader功能支持两种形式数据集读取自定义采样策略自动组装成批数据多进程数据加载自动实现锁页内存&#xff08;Pinning Memo…...

编程日记 2024/9/15 19:57:35

浅谈openresty

熟悉了nginx后再来看openresty&#xff0c;不得不说openresty是比较优秀的。 对nginx和openresty的历史等在这此就不介绍了。 首先对标nginx&#xff0c;自然有优劣 一、开发难度 nginx&#xff1a; 毫无疑问nginx的开发难度比较高&#xff0c;需要扎实的c/c基础&#xff…...

编程日记 2024/9/15 19:55:34

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/9/14 10:55:09

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/9/13 15:19:41

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/9/6 18:01:23

Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

编程新知 2025/8/15 19:59:33

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/9/14 11:46:41

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/9/4 2:37:46

安卓基础（Java 和 Gradle 版本）

1. 设置项目的 JDK 版本 方法1&#xff1a;通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分&#xff0c;设置 Gradle JDK 方法2&#xff1a;通过 Settings File → Settings... (或 CtrlAltS)…...

编程新知 2025/7/10 0:32:50

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

编程新知 2025/9/9 10:04:09

文件上传漏洞防御全攻略

要全面防范文件上传漏洞&#xff0c;需构建多层防御体系&#xff0c;结合技术验证、存储隔离与权限控制&#xff1a; &#x1f512; 一、基础防护层 前端校验&#xff08;仅辅助&#xff09; 通过JavaScript限制文件后缀名&#xff08;白名单&#xff09;和大小&#xff0c;提…...

编程新知 2025/8/18 19:05:00