amis Grid 行定位工具类完全指南row-start、row-end 与 row-span 实战解析【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis本文聚焦 amis 开源前端低代码框架内置的 CSS Grid 行方向工具类体系系统讲解row-auto、row-span-*、row-start-*、row-end-*三组共 42 个类名的语法、对应 CSS 属性与响应式变体并结合 Grid2D 组件 说明在 JSON 配置页面中的实际用法。读完本文你将能够精确控制 amis 页面中任何格子在网格垂直方向上的起始位置、结束位置与跨越行数实现任意二维布局。一、什么是 Grid 行定位工具类amis 的样式体系在 packages/amis-ui/scss/helper 下提供了一套类 Tailwind 风格的 CSS 工具类utility class其中网格Grid方向又分为列方向与行方向两组。本文要讲解的行方向工具类负责控制网格项目grid item在垂直方向上的三个核心维度CSS 概念对应工具类作用跨越行数row-span-*项目占几行网格轨道起始行线row-start-*项目从第几条行网格线开始结束行线row-end-*项目到第几条行网格线结束这三组属性是 CSS Grid 布局中grid-row简写属性及其子属性grid-row-start/grid-row-end的语义化封装。理解它们的关键前提是网格线grid line从 1 开始编号一个占据 N 行的项目其起始行线与结束行线之间恰好跨越 N 条行轨道。例如row-start-2row-end-5等价于row-span-3两者都能让项目占据第 2 到第 5 条行网格线之间的 3 行空间。本文核心依据是仓库中的 _row-start-end.md 文档与同目录下的 _row-start-end.scss 源码实现两者内容一一对应下面逐一展开。二、完整类名速查表以下三张表格完整覆盖 _row-start-end.md 中定义的全部类名及其对应的 CSS 声明可直接复制使用。2.1 跨越行数row-auto 与 row-span-*ClassPropertiesrow-autogrid-row: autorow-span-1grid-row: span 1/span 1row-span-2grid-row: span 2/span 2row-span-3grid-row: span 3/span 3row-span-4grid-row: span 4/span 4row-span-5grid-row: span 5/span 5row-span-6grid-row: span 6/span 6row-span-7grid-row: span 7/span 7row-span-8grid-row: span 8/span 8row-span-9grid-row: span 9/span 9row-span-10grid-row: span 10/span 10row-span-11grid-row: span 11/span 1row-span-12grid-row: span 12/span 12row-span-fullgrid-row: 1/-1其中row-auto让浏览器自动决定项目的行放置位置与跨越行数是取消其他行定位类名、恢复默认流式排布的最简方式row-span-N明确声明项目固定跨越 N 条行轨道数值范围 112与 amis 默认的 12 列网格体系见 Grid2D.tsx 中cols: 12的默认值对齐row-span-full使用负整数索引1 / -1表示从第 1 条行网格线跨越到最后一条行网格线即项目始终撑满容器全部行轨道即使后续行数动态变化也无需修改类名需要特别说明表格中row-span-11写为grid-row: span 11/span 1这是文档与源码 _row-start-end.scss 中一致的写法实际语义为跨越 11 行在使用时请按span 11理解不必受后半段写法干扰。2.2 起始行线row-start-*ClassPropertiesrow-start-1grid-row-start: 1row-start-2grid-row-start: 2row-start-3grid-row-start: 3row-start-4grid-row-start: 4row-start-5grid-row-start: 5row-start-6grid-row-start: 6row-start-7grid-row-start: 7row-start-8grid-row-start: 8row-start-9grid-row-start: 9row-start-10grid-row-start: 10row-start-11grid-row-start: 11row-start-12grid-row-start: 12row-start-13grid-row-start: 13row-start-autogrid-row-start: autorow-start-1表示项目从第 1 条行网格线容器最顶端开始放置row-start-N的 N 可取 113覆盖 12 列网格在行方向上的全部网格线row-start-auto恢复自动定位。2.3 结束行线row-end-*ClassPropertiesrow-end-1grid-row-end: 1row-end-2grid-row-end: 2row-end-3grid-row-end: 3row-end-4grid-row-end: 4row-end-5grid-row-end: 5row-end-6grid-row-end: 6row-end-7grid-row-end: 7row-end-8grid-row-end: 8row-end-9grid-row-end: 9row-end-10grid-row-end: 10row-end-11grid-row-end: 11row-end-12grid-row-end: 12row-end-13grid-row-end: 13row-end-autogrid-row-end: autorow-end-N定义项目占据的行轨道截至第 N 条行网格线。注意行结束位置始终比行跨越数大 1例如一个项目想占据第 1 行到第 3 行3 条轨道应写为row-start-1 row-end-4或简化为row-span-3。三、源码实现三个 Sass Mixin 如何生成类名工具类的底层实现位于 _row-start-end.scss它通过三个可复用的 Sass Mixin 批量生成上述类名避免手工维护几十条重复 CSSmixin make-grid-row-span($prefix: .) { /* row-auto 与 row-span-1 ~ row-span-12、row-span-full */ } mixin make-grid-row-start($prefix: .) { /* row-start-1 ~ row-start-13、row-start-auto */ } mixin make-grid-row-end($prefix: .) { /* row-end-1 ~ row-end-13、row-end-auto */ } include make-grid-row-span(); include make-grid-row-start(); include make-grid-row-end();三个 Mixin 的命名与文档表格一一对应make-grid-row-span生成跨越类make-grid-row-start生成起始类make-grid-row-end生成结束类。从源码结构可以清晰看到完整的调用链helper.scss 中按顺序import了 grid 目录下的全部文件auto-columns、auto-flow、auto-rows、column-start-end、columns、gap、row-start-end、rows行方向类与列方向类、轨道定义类、间距类一起被编译进最终样式_variables.scss 定义了设备断点映射$devices_mixins.scss 提供media-device()混合宏将断点名解析为实际media查询。3.1 Mixin 的 prefix 参数与响应式变体每个 Mixin 都接收一个$prefix参数默认值为.普通类选择器。在文件末尾源码通过以下循环为每个设备断点重新调用三个 Mixin并传入. selector-escape($deivce :)作为带前缀的选择器each $deivce in map-keys($devices) { include media-device($deivce) { include make-grid-row-span(. selector-escape($deivce :)); include make-grid-row-start(. selector-escape($deivce :)); include make-grid-row-end(. selector-escape($deivce :)); } }selector-escape用于将断点名安全转义为合法的选择器片段。结合 _variables.scss 中的断点定义$devices: ( m: (max-width: 768px), pc: (min-width: 769px) ) !default;可以推断出最终编译产物包含三套完整类名无前缀基础类row-span-2、row-start-3、row-end-5等作用于任意屏幕m:前缀移动端类如m:row-span-2仅在max-width: 768px含 768px的窄屏下生效用于手机端的紧凑布局pc:前缀桌面端类如pc:row-span-2仅在min-width: 769px的宽屏下生效用于桌面端的宽松布局。这就是 amis 工具类实现移动端优先响应式调整的标准方式基础类负责默认表现前缀类负责在特定断点覆盖默认值。四、实战组合行定位类与配套网格类的协作行定位类单独使用无法构建完整布局需要与同目录下的其他网格工具类配合它们全部由 helper.scss 统一引入可直接在页面中使用配套类组文档/源码典型用途grid-rows-1~grid-rows-6、grid-rows-none_rows.md用grid-template-rows: repeat(N, minmax(0, 1fr))预定义 N 条等分行轨道是row-span-*生效的前提auto-rows-auto/min/max/fr_auto-rows.md定义隐式行轨道尺寸auto-rows-fr对应grid-auto-rows: minmax(0, 1fr)grid-flow-row/col/row-dense/col-dense_auto-flow.md控制网格自动排布方向与行定位类配合处理跨行后的空位回填gap-*、gap-x-*、gap-y-*_gap.md行/列间距gap-y-*控制行间垂直间距col-span-*、col-start-*、col-end-*_column-start-end.md行方向的镜像工具类控制水平方向结构与 row 系列完全对称一个典型的12 列网格 2 行其中某个卡片跨越一整行的 HTML 片段如下div classgrid grid-cols-12 grid-rows-2 gap-y-4 div classcol-span-8 row-start-1 row-end-2主内容区占 8 列、第 1 行/div div classcol-span-4 row-start-1 row-end-2侧栏占 4 列、第 1 行/div div classcol-span-12 row-span-1页脚跨满 12 列、第 2 行/div /div其中主内容区与侧栏都使用了row-start-1 row-end-2的起止行线写法而页脚改用row-span-1的跨越行数写法两种方式在本例中效果等价便于读者对照理解。五、在 amis 页面中的落地Grid2D 组件与 gridClassName行定位工具类在 amis 中最直接的落地点是Grid2D 组件二维网格布局。在 Grid2D.tsx 中每个格子支持gridClassName属性/** * 每个格子最外层容器的 className */ gridClassName?: string;组件渲染每个格子时Grid2D.tsx内部通过行内样式设置gridRowStart、gridRowEnd以及gridColumnStart、gridColumnEnd来决定格子的位置而gridClassName会原样附加到格子的外层容器上因此可以在 JSON 中直接写入行定位工具类来补充修饰{ type: grid-2d, cols: 12, rowHeight: 50, grids: [ { x: 1, y: 1, h: 2, w: 12, gridClassName: row-span-2 bg-green-300, type: tpl, tpl: 占据两行高的横幅 } ] }这里row-span-2与h: 2语义一致都是从网格排布角度占据 2 行轨道gridClassName中还可叠加gap-y-*控制垂直间距、bg-*系列控制背景色等工具类。关于 Grid2D 的完整用法x/y/h/w四属性、cols、rowHeight、gap等配置项可进一步阅读 grid-2d 组件文档。需要注意的是Grid2D 是 amis 组件层面的二维布局能力它依赖 CSS Grid 规范官方文档 grid-2d.md 明确说明该布局方式不支持 IE11同样的限制适用于本文介绍的全部 Grid 工具类使用前请确认目标浏览器环境支持 CSS Grid。六、使用建议与速记要点优先用 row-span 而非 row-start/row-end当只需要占 N 行时row-span-N更短且不易出错需要精确锚定某条行网格线如合并多行、对齐到指定行时再使用row-start-N/row-end-N。理解网格线编号偏移row-end-N的数字等于跨越行数 起始行线数字例如row-start-2 row-end-5row-span-3三者描述同一块区域。响应式覆盖遵循基础 断点模式row-span-6提供默认行为m:row-span-12在 768px 以下覆盖为整行pc:row-span-6在 769px 以上恢复实现移动端竖排、桌面端并排的典型布局。行定位类不创建网格轨道它只决定项目在已有行轨道中的位置与跨度行轨道的尺寸由grid-rows-*、auto-rows-*与隐式轨道共同决定定位类必须与轨道定义类配合使用。七、延伸阅读类名完整清单与属性对照_row-start-end.mdSass 源码实现含响应式变体生成逻辑_row-start-end.scss列方向对称工具类_column-start-end.md 与 _column-start-end.scss行轨道定义与自动行_rows.md、_auto-rows.md网格间距类_gap.md断点变量与媒体查询混合宏_variables.scss、_mixins.scss工具类整体入口helper.scssGrid2D 组件源码与文档Grid2D.tsx、grid-2d.md【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考