前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载导读本文聚焦 rsuite 组件库 Grid 栅格系统的**嵌套Nesting**能力讲解如何在Col内部继续放置Row与Col从而在同一套 24 列栅格体系内逐层构建复杂的响应式布局。读完本文你将掌握嵌套栅格的完整写法、每一层级重新计算列宽的原理、Row与Col的间距gutter机制以及断点xs/sm/md/lg/xl/xxl在嵌套场景下的应用方式。文中所有代码与结论均可在当前仓库中找到对应的源码实现与官方演示片段。什么是嵌套栅格rsuite 的 Grid 组件提供了一套基于24 列的响应式布局系统其灵感来自 Bootstrap 的栅格系统核心由三个组件组成Grid定义整个栅格系统的容器组件Row创建水平行行内包含列组件Col创建垂直列是实际内容的容器。嵌套栅格是指在某个Col内部再放置一个Row并在其中继续使用Col划分空间。官方文档明确说明“栅格系统支持无限嵌套。你可以在列内放置行以创建更复杂和灵活的布局同时在每一层级保持相同的 24 列栅格系统”见 docs/pages/components/grid/zh-CN/index.md 的“嵌套”一节。换句话说无论嵌套到第几层每个Row内部的列宽之和始终按 24 等分计算外层列只是把“一整行”的宽度让渡给内层Row内层再独立地按 24 列重新分配。这种设计让复杂仪表盘、卡片矩阵、分栏表单等场景的布局代码保持结构清晰、可预测。嵌套布局的标准写法官方演示片段位于 docs/pages/components/grid/fragments/nested.md完整代码如下import { Grid, Row, Col, Center } from rsuite; const DecorativeBox ({ children, ...rest }) ( Center bgvar(--rs-placeholder) p{20} my{6} roundedlg {...rest} {children} /Center ); const App () ( Grid fluid Row Col span{12} Row Col span{12} Row Col span{12} DecorativeBox12/DecorativeBox /Col Col span{12} DecorativeBox12/DecorativeBox /Col /Row /Col Col span{12} Row Col span{12} DecorativeBox12/DecorativeBox /Col Col span{12} DecorativeBox12/DecorativeBox /Col /Row /Col /Row /Col Col span{12} Row Col span{12} Row Col span{12} DecorativeBox12/DecorativeBox /Col Col span{12} DecorativeBox12/DecorativeBox /Col /Row /Col Col span{12} Row Col span{12} DecorativeBox12/DecorativeBox /Col Col span{12} DecorativeBox12/DecorativeBox /Col /Row /Col /Row /Col /Row /Grid ); ReactDOM.render(App /, document.getElementById(root));该示例的实际结构是一个三层嵌套的矩阵第 1 层Grid fluid内只有一个Row包含两个span{12}的Col各占一行的一半12 12 24正好填满第 2 层每个外层Col内部再放入一个Row同样拆成两个span{12}的Col第 3 层每个第 2 层的Col内部继续放入Row再拆成两个span{12}的Col最内层放置内容盒。最终渲染出来的是一个“田字格套田字格”的 4×4 等宽矩阵而每一层代码结构完全同构。这正是嵌套栅格的核心价值复用同一套RowCol的写法即可在任意深度下保持一致的列宽语义。每一层级为什么都保持 24 列从源码看Row与Col的宽度计算并不依赖全局状态而是纯 CSS 结构Row渲染为display: flex; flex-flow: row wrap;的弹性容器见 src/Grid/styles/_row.scssCol的span会被编译成rs-col-xs-*这类类名通过 flex 的flex-basis/百分比宽度控制列宽见 src/Grid/Col.tsx 中addResponsiveClasses的类名生成逻辑断点常量定义在 src/internals/constants/index.ts[xs, sm, md, lg, xl, xxl]。因为宽度百分比始终是相对于最近的祖先Row容器计算的所以内层Row的 24 份是对它自己所在那个Col的可用宽度再切分与外层的分配互不干扰。这也是嵌套能够“无限层”的前提每一层都是一个独立的 flex 布局上下文。结合 gutter 理解嵌套间距Row支持gutter属性用于控制列与列之间的间距类型为type GutterType number | string | [number | string, number | string];其中数组形式[horizontal, vertical]可分别设置水平与垂直间距见 src/Grid/types.ts。从实现上看Row会把 gutter 转换为 CSS 变量--rs-grid-gutter水平与--rs-grid-row-gutter垂直见 src/Grid/utils/styles.ts行内通过负值外边距margin-inline: var(--rs-row-gutter)抵消列的内边距列通过padding-inline: var(--rs-col-gutter)撑开间距见 src/Grid/styles/_columns.scss。默认的 gutter 由 CSS 变量定义在 src/Grid/styles/_variables.scss:root { --rs-grid-gutter: calc(var(--rs-spacing) * 3); --rs-row-gutter: calc(var(--rs-grid-gutter) / -2); --rs-col-gutter: calc(var(--rs-grid-gutter) / 2); }嵌套时的间距表现内层Row会重新建立一组 gutter 计算因此嵌套列之间会自动产生与顶层一致的列间距无需额外手动设置。这意味着嵌套层次越多视觉上的“沟槽”会按层级自然叠加设计时需要注意层级过深时水平间距的累加效果。让嵌套栅格响应式嵌套层与顶层一样可以逐层使用响应式属性。Col的span、offset、push、pull、order、hidden均支持两种写法1. 单值写法作用于 xs 断点Col span{6}…/Col2. 响应式对象写法Col span{{ xs: 12, md: 6, lg: 4 }}…/Col在 src/Grid/Col.tsx 中resolve函数会遍历BREAKPOINTS把对象中的每个断点值编译为对应的类名单值时则统一归入xs见addResponsiveClasses(xs, propValue, type)。断点对应的屏幕宽度定义在 src/styles/_variables.scss断点最小宽度xs默认0 起sm576pxmd768pxlg992pxxl1200pxxxl1400px在嵌套布局中你可以让内层列在不同断点下呈现不同分栏数例如在手机上内层两列各占 12上下堆叠在桌面端各占 6左右并排Grid fluid Row Col span{12} Row Col span{{ xs: 12, md: 6 }} DecorativeBox左/DecorativeBox /Col Col span{{ xs: 12, md: 6 }} DecorativeBox右/DecorativeBox /Col /Row /Col /Row /Grid此外Row的gutter、aligntop/middle/bottom、justifystart/end/center/space-around/space-between同样支持响应式对象写法方便在嵌套层做对齐与分布控制。示例中的装饰盒DecorativeBox解析官方嵌套示例中用于展示占位的DecorativeBox基于Center组件实现const DecorativeBox ({ children, ...rest }) ( Center bgvar(--rs-placeholder) p{20} my{6} roundedlg {...rest} {children} /Center );它只是示例辅助组件并非嵌套栅格的必需部分Center是一个让子内容水平垂直居中的容器组件实现在 src/Center/Center.tsx支持inline属性bg、p、my、rounded等是布局属性分别设置背景色、内边距、纵向外边距与圆角这些属性来自Center继承的Box能力背景色取用了设计变量var(--rs-placeholder)在实际业务中你可以替换为真实内容组件卡片、表单、图表等。嵌套常用技巧与注意事项列宽始终按 24 等分无论嵌套多深每个Row内所有Col的span总和应保持为 24超出会按 flex 换行规则自动折行。内容放在最内层尽量让Row/Col只承担结构职责把真实内容文本、组件、图片放到最内层的容器里避免层级过多导致 DOM 过深。层级与间距叠加嵌套会继承每层 gutter 的负边距/内边距机制若视觉上间距过大可通过调整对应层Row的gutter或响应式 gutter来收敛。响应式属性下放外层列负责大区块的断点切换内层列负责区块内部的断点切换分工明确后代码可维护性最好。fluid容器便于自由嵌套示例使用Grid fluid使容器宽度为 100%见 src/Grid/Grid.tsx 中fluid属性生成的rs-grid-container-fluid类更适合嵌在页面区块或组件内部固定宽度的Grid则会在 sm/md/lg/xl/xxl 断点下依次应用 540/720/960/1140/1320 像素的容器宽度见 src/Grid/styles/index.scss。嵌套相关 Props 速查以下属性表取自官方文档docs/pages/components/grid/zh-CN/index.md供嵌套场景下组合使用Grid属性类型默认值描述asElementType(div)自定义元素类型fluidboolean流体布局100% 宽度Row属性类型默认值描述aligntop \| middle \| bottom或响应式值垂直对齐方式asElementType(div)自定义元素类型classPrefixstring(row)CSS 类前缀gutterGutterType或响应式值栅格间距支持水平/垂直justifystart \| end \| center \| space-around \| space-between或响应式值水平分布方式Col属性类型默认值描述asElementType(div)自定义元素类型classPrefixstring(col)CSS 类前缀hiddenboolean 或响应式值是否隐藏栅格offsetnumber 或响应式值栅格左侧间隔格数ordernumber 或响应式值栅格列顺序pullnumber 或响应式值栅格向左移动格数pushnumber 或响应式值栅格向右移动格数spannumber |auto或响应式值占位格数auto时按内容自适应注意6.0 之后推荐使用新式响应属性如span{{ md: 6 }}旧式的xs/smOffset/lgPush等写法已标记为废弃见 src/Grid/types.ts 中的DeprecatedColProps但当前版本仍会兼容处理见 src/Grid/Col.tsx 中的 legacy 分支。小结rsuite 的嵌套栅格是“同一套规则、任意深度复用”的设计每个Row都是独立的 24 列 flex 布局上下文Col的宽度、间距、对齐与响应式行为在各层一致生效。结合官方 nested.md 示例与 src/Grid 下的Grid.tsx、Row.tsx、Col.tsx及样式源码你可以在实际项目中放心地以递归结构组织复杂页面区块同时保持每层布局的可预测性。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite Grid 栅格系统实战从 24 列基础布局到响应式断点rsuite Grid 栅格系统实战从 24 列基础布局到响应式断点 导读 rsuite 的 Grid 组件提供了一套基于 24 列栅格 的响应式布局系统由前端UI组件rsuite Grid 布局组件完全指南24 栅格响应式布局系统实战rsuite Grid 布局组件完全指南24 栅格响应式布局系统实战 本指南以 rsuite 官方文档 Grid 组件文档 https://link.gitc前端UI组件Ant Design Vue Grid 栅格布局系统完整指南24 栅格、Flex 布局与响应式断点实战Ant Design Vue Grid 栅格布局系统完整指南24 栅格、Flex 布局与响应式断点实战 Ant Design Vue 的 Grid栅格是基前端UI组件设计系统上一篇使用 AWS CLI 的 describe-code-review 查询 CodeGuru Reviewer 代码评审状态与元数据下一篇YouTube.js NotificationsMenu 类解析读取与分页遍历 YouTube 通知菜单的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考