gridlayout

定义

gridlayout 指将容器空间切分为若干行与列的规则网格，再把元素放置到行列交叉形成的单元格中的布局方法^[1]。在网页领域，它特指 CSS 网格布局模块所定义的二维网格布局系统，网格容器的子元素可被定位到预定义网格的任意槽位，网格既可以是固定尺寸也可以是弹性尺寸。与只沿单一方向排列的布局方式不同，网格布局同时在行、列两个维度上确定元素的位置与尺寸。

按定位可分为两类：一类是等分式网格布局，容器被切成大小相等的矩形，每个矩形放一个组件，行列数与间距由构造函数参数决定^[3]；另一类是轨道式网格布局，行列各自带有独立的尺寸规则，可混用固定长度、内容自适应与按剩余空间分配的比例单位，元素还能跨越多行多列。

原理

CSS 网格布局以网格容器为坐标系。容器内的行轨道和列轨道由尺寸函数描述，两条相邻网格线之间的空间即为轨道；行与列的交叉处构成网格单元格，由一个或多个相邻单元格组成网格区域，元素通过网格放置属性被指派到区域中^[4]。网格线可以命名，元素按名称而非序号定位，网格定义变化时元素规则无需重写^[5]。

轨道的尺寸计算是核心环节。规范要求先按各轨道的尺寸函数确定基础尺寸，再依据容器可用空间在轨道间分配余量；使用 $1\mathrm{fr}$ 单位的轨道分得剩余空间中的一份，若容器宽度不足以容纳固定轨道，弹性轨道可收缩至零并导致内容溢出^[4]。行列数目未显式声明的部分会形成隐式轨道，其尺寸由自动行列属性决定^[6]。

等分式网格布局的算法更简单：容器按指定行列数平均划分，所有组件获得相同尺寸，行数与列数都设为零以外的值时列数会被忽略，实际列数由行数与组件总数推算^[1]。

flowchart LR

A[网格容器] --> B[定义行轨道与列轨道]

B --> C[网格线 / 单元格 / 网格区域]

C --> D[元素放置：序号或命名区域]

D --> E[轨道尺寸分配：固定 / 内容 / fr]

E --> F[布局结果]

发展历程

CSS 网格布局规范的早期出版记录可追溯到 2007 年 4 月 7 日，此后多版草案在市，第一级规范于 2013 年 4 月 2 日发布工作草案^[7][8]。2015 年 8 月 6 日，万维网联盟的级联样式单工作组发布第一级工作草案，将其表述为面向用户界面设计的二维网格布局系统^[9]。2016 年 9 月 29 日该模块进入候选推荐阶段，2017 年 5 月 9 日发布更新后的候选推荐标准^[9]。

浏览器实现集中在 2017 年 3 月：Firefox 52 于 3 月 7 日支持，Chrome 57 于 3 月 9 日支持桌面版，Safari 10.1 与 Opera 44 随后于 3 月下旬支持^[10]。2018 年 2 月 6 日，CSS 工作组发布第二级规范的首个公开工作草案，新增子网格功能，使嵌套网格可参与父网格的尺寸调整^[9]；2020 年 8 月 18 日发布第二级候选推荐标准并同步更新第一级^[9]。子网格自 Firefox 71（2019 年 12 月 10 日）起支持，Chrome 117（2023 年 9 月 12 日）跟进^[11]。

在通用编程语言一侧，Java 的抽象窗口工具包自 1.0 版起即提供 GridLayout 布局管理器，属于该语言早期图形界面布局方案之一^[1]。安卓平台则另行提供 GridLayout 布局容器，其 androidx 版本 1.1.0 于 2025 年 4 月 9 日发布，官方说明该库已进入维护状态，仅接受关键修复，新界面建议改用 Compose 构建。

应用

网页排版是网格布局最主要的应用场景。规范以游戏界面为例说明其用途：标题、统计区、棋盘、得分区与控制区可分别占据不同网格区域，在容器尺寸变化时按预设规则伸缩与对齐^[5]。常见的页眉、页脚、正文加一至两栏侧栏的结构，配合命名网格区域即可直接表达，且各列默认等高^[6]。

网格布局与媒体查询结合可实现同一套语义标记在不同屏幕方向下呈现不同排布，用于手机横竖屏适配^[8]。规则网格还可用于把自定义控件按部位切分，例如滑块的两端标签、轨道、填充部分与滑块头各占一块网格区域，以弹性列实现随尺寸移动的效果^[8]。

在桌面软件与移动应用开发中，网格布局用于窗体控件与界面组件的规则排布：Java 的 GridLayout 将组件等分排入矩形网格并可设置横纵间距^[1]；安卓的 GridLayout 则以网格形式组织视图，通过依赖引入项目使用。

局限

网格布局的视觉重排能力不等于逻辑顺序。规范明确指出，order 属性与网格放置属性不影响语音等非视觉媒体的顺序，也不改变顺序导航的遍历次序；作者只应将其用于视觉而非逻辑重排，用这些特性做逻辑重排的样式表不符合规范^[12]。

第一级规范的嵌套网格各自建立独立轨道，子网格需等到第二级才获得参与父网格尺寸计算的能力，规范为此单独引入 subgrid 关键字，其实现难度明显高于第一级，各浏览器到位时间相差约 4 年^[11][9]。子网格维度内也无法生成隐式轨道，自动放置的项目数量超出可用单元格时会挤入最后一条轨道^[13]。

等分式网格布局的约束更为直接：所有组件尺寸相同，行数或列数之一需设为零值以容纳任意数量元素，行列皆非零时列数被忽略，因而难以表达尺寸差异明显或跨格排布的界面^[3]。此外，规范允许用户代理对隐式网格的规模设定上限，超出范围的行列线可能被裁剪^[14]；在容器空间不足时，弹性轨道可压缩到零，网格内容会溢出容器^[4]。

参见

• 弹性盒布局 —— 沿单一方向分配空间的 CSS 布局模型，常与网格布局配合使用。

• 层叠样式表 —— 网格布局规范所属的样式语言。

• 万维网联盟 —— 发布 CSS 网格布局模块规范的标准组织。

• 媒体查询 —— 与网格布局结合实现不同屏幕尺寸适配的机制。

• 布局管理器 —— 图形界面框架中负责控件排布的组件，Java 的 GridLayout 即为其一。