前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载导读rsuite 的 Grid 组件提供了一套基于24 列栅格的响应式布局系统由Grid容器、Row行、Col列三个组件协作完成。本文以官方文档的基础演示片段basic.md为主体完整讲解 24 列栅格的数学原理、span属性的全部取值形态1–24 数字、auto、响应式对象并结合仓库源码解析栅格样式是如何生成的、断点体系是如何定义的最终让你能够独立写出从固定分栏到复杂响应式布局的完整方案。一、三个组件各司其职在动手写代码前先明确Grid/Row/Col在布局中的分工见 Grid 组件文档组件职责默认 CSS 类前缀Grid定义整个栅格系统的容器决定整体宽度grid-containerRow创建水平的行负责承载列、控制间距与对齐rowCol创建垂直的列是实际内容文本、表单、卡片等的最终容器col从源码实现看三个组件都基于内部Box组件封装src/Grid/Grid.tsx、src/Grid/Row.tsx、src/Grid/Col.tsx因此它们都额外继承了Box的as自定义元素类型默认div、className、style等能力。二、基础示例一行分成 24 份官方基础演示basic.md展示的正是 24 列栅格最核心的用法通过给Col设置span属性把一行等分为若干列。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{2} DecorativeBox2/DecorativeBox /Col {/* …… 重复 12 次 span{2} 的 Col …… */} /Row Row Col span{4} DecorativeBox4/DecorativeBox /Col {/* …… 重复 6 次 span{4} 的 Col …… */} /Row Row Col span{6} DecorativeBox6/DecorativeBox /Col {/* …… 重复 4 次 span{6} 的 Col …… */} /Row Row Col span{8} DecorativeBox8/DecorativeBox /Col {/* …… 重复 3 次 span{8} 的 Col …… */} /Row Row Col span{12} DecorativeBox12/DecorativeBox /Col Col span{12} DecorativeBox12/DecorativeBox /Col /Row /Grid ); ReactDOM.render(App /, document.getElementById(root));示例中的换算关系完全遵循「24 列总和」的规则span{2}× 12 列 → 填满一行2 × 12 24span{4}× 6 列 → 填满一行4 × 6 24span{6}× 4 列 → 填满一行6 × 4 24span{8}× 3 列 → 填满一行8 × 3 24span{12}× 2 列 → 填满一行12 × 2 24也就是说span的取值在 1 到 24 之间它表示该列在 24 等分中所占的份额。源码中的 24 列生成规则这 24 份的宽度并不是硬编码在组件里的而是由 SCSS 的make-gridmixin 循环生成src/Grid/styles/_mixin.scssfor $value from 1 through 24 { .rs-col-#{$size}-#{$value} { width: math.percentage(math.div($value, 24)); } }span{6}最终会被渲染为 CSS 类rs-col-xs-6或对应断点前缀其宽度即为6 / 24 25%。以 12 等分为例rs-col-xs-12的宽度是50%两个span{12}恰好各占一行的一半。测试用例也验证了这一点src/Grid/test/Col.spec.tsx例如Col span{{ md: 1 }}会同时拥有rs-col与rs-col-md-1两个类名。Grid容器的两种形态示例代码中使用了Grid fluidfluid流体布局容器宽度始终为 100%自适应父级宽度对应样式类.rs-grid-container-fluidsrc/Grid/styles/index.scss。固定宽度默认不传fluid时Grid会根据当前视口所处的断点自动选择容器宽度src/Grid/styles/index.scss断点最小视口宽度容器宽度默认 576px100%含左右 paddingsm576px540px guttermd768px720px gutterlg992px960px gutterxl1200px1140px gutterxxl1400px1320px guttergutter 宽度默认值为calc(var(--rs-spacing) * 3)见 index.scss因此容器宽度会加上该值避免内容被 gutter 挤到换行。三、span的三种取值形态根据 Col 组件文档 与 Col.tsx 源码span接受三种形态1. 数字1–24Col span{6}占 6 格即 25% 宽度/Col适用于所有屏幕内部会被归一化到xs断点即生成rs-col-xs-6见 Col.tsx 中的单值处理逻辑。2.auto按内容自动调节列宽Col span{12}12/Col Col spanautoauto/Col当spanauto时列宽不再由 24 等分决定而是根据内容自动伸缩。其样式定义在 src/Grid/styles/_columns.scss[class*rs-col-auto-] { flex-grow: var(--rs-col-auto-flex-grow); /* 1 */ flex-basis: var(--rs-col-auto-flex-basis); /* 0 */ max-width: var(--rs-col-auto-max-width); /* 100% */ }即该列采用flex-grow: 1、flex-basis: 0的弹性模式占据行内剩余空间。完整示例见 auto.md它展示了「固定列 auto 列」混排如6 auto 6以及响应式形态Col span{{ xs: 8, lg: auto }}——小屏固定 8 格大屏lg 及以上自动伸缩。3. 响应式对象不同断点不同跨度Col xs{24} md{12}xs24, md12/Col这是文档中响应式示例examples/responsive.tsx最典型的写法小屏xs占满整行中等屏md起变成一行两列。等价的新语法是对象形式Col span{{ xs: 24, md: 12 }}xs24, md12/Col对象中的键必须是仓库定义的六个断点src/internals/constants/index.tsexport const BREAKPOINTS [xs, sm, md, lg, xl, xxl];其类型定义在 src/internals/types/sizes.tsexport type ResponsiveValueT { [key in Breakpoints]?: T };组件内部会遍历BREAKPOINTS为每个有值的断点生成对应前缀的 CSS 类Col.tsx例如span{{ xs: 12, md: 6 }}会同时生成rs-col-xs-12和rs-col-md-6。SCSS 侧再配合媒体查询按断点生效index.scss从而实现「小屏 12 格、中屏 6 格」的分级响应。四、断点体系与响应式工作方式rsuite 栅格借鉴了 Bootstrap 的栅格系统官方文档原话断点阈值定义在 src/styles/_variables.scss断点最小视口宽度xs0默认无媒体查询sm576pxmd768pxlg992pxxl1200pxxxl1400px每个断点的栅格类在对应媒体查询内通过make-grid(xs | sm | ... | xxl)生成index.scss因此rs-col-xs-*始终生效移动端优先的基础样式rs-col-sm-*在 ≥576px 生效依此类推后者覆盖前者。这种「移动优先」的设计意味着你只需在对象中给xs一个兜底值再为更大的断点逐个覆盖即可例如span{{ xs: 24, md: 16, lg: 12 }}。五、围绕span的进阶布局组合栅格系统的完整能力不止span官方文档Grid 组件文档将其归纳为以下常用组合全部可在Col上以同样三种形态单值 /auto/ 响应式对象使用属性作用示例offset右侧偏移 N 格用于制造间隙或居中内容offset{4}右移 4 格push/pull不改变 DOM 顺序的前提下视觉上右移 / 左移 N 格push{6}、pull{6}order控制列在行内的视觉顺序数字越小越靠前order{{ xs: 2, md: 1 }}hidden在指定断点隐藏列hidden{{ md: true }}对应的响应式类名由 Col.tsx 的addResponsiveClasses生成例如offset{{ xs: 2, md: 3 }}会产出rs-col-xs-offset-2、rs-col-md-offset-3hidden则产出rs-hidden-xs这类顶层类。SCSS 中每种属性都有对应的声明src/Grid/styles/_mixin.scss.rs-col-#{$size}-pull-#{$value} { inset-inline-end: percentage($value / 24); } .rs-col-#{$size}-push-#{$value} { inset-inline-start: percentage($value / 24); } .rs-col-#{$size}-offset-#{$value} { margin-inline-start: percentage($value / 24); } .rs-col-#{$size}-order-#{$value} { order: $value; }注意offset通过margin-inline-start实现会把后面的列一起顶到右侧而push/pull通过inset-inline-start/inset-inline-end实现只是平移自己不挤压后续列——理解这一点可以帮你选对属性。这些行为都有测试用例背书src/Grid/test/Col.spec.tsx。换行规则当同一行内所有列的span与offset之和超过 24 时超出的列会自动换行到下一行官方文档「Multiple Rows」一节见 multiple-rows.md。因此你无需手动拆分Row只需保证每一「视觉行」的跨度总和不超过 24 即可。Row 上的 gutter / align / justify间距与对齐是Row的职责Row.tsxgutter列间距接受number | string | [number, number]元组[水平, 垂直]或响应式对象类型定义见 src/Grid/types.ts。它最终被转换为 CSS 变量注入行内样式src/Grid/utils/styles.ts元组的第一项写入--rs-grid-gutter-断点水平间距第二项写入--rs-grid-row-gutter-断点垂直间距SCSS 通过负外边距 列内边距的方式抵消并均分间距src/Grid/styles/_mixin.scss。align垂直对齐top | middle | bottom映射到align-items。justify水平分布start | end | center | space-around | space-between映射到justify-content。两者都支持响应式对象例如align{{ xs: top, md: middle }}、justify{{ xs: center, md: space-between }}完整示例见 examples/responsive.tsx。SCSS 中对应responsive-align与responsive-justify两个 mixinsrc/Grid/styles/_mixin.scss。嵌套Col内部可以继续放RowCol每一层都保持 24 等分规则支持无限嵌套。典型用法是「主内容区 侧栏区」Col xs{24} md{16}内再放一个Row把侧栏拆成上下两块examples/responsive.tsx。六、新旧 API 形态与向后兼容Col的栅格属性存在两套写法src/Grid/types.ts新语法推荐span/offset/push/pull/order/hidden直接传数字或响应式对象旧语法已标记 deprecatedxs、sm、md… 数字属性以及xsOffset、mdPush、lgPull、xlHidden这类逐断点独立属性。源码中明确注释「Use span{{ xs: number }} instead」但 Col.tsx 的兼容分支 仍然支持它们测试也覆盖了旧写法的回归src/Grid/test/Col.spec.tsx。因此老项目可以平滑迁移新代码请优先使用对象语法它把同一属性在不同断点的取值收敛到一个位置可读性和可维护性都更好。七、完整响应式方案示例将上述能力组合起来即可写出官方响应式示例examples/responsive.tsx同款的完整页面骨架Grid fluid {/* 基础响应式小屏一列、中屏两列 */} Row Col xs{24} md{12} DecorativeBoxxs24, md12/DecorativeBox /Col Col xs{24} md{12} DecorativeBoxxs24, md12/DecorativeBox /Col /Row {/* 响应式间距与对齐 */} Row gutter{{ xs: 8, md: 24 }} align{{ xs: top, md: middle }} Col xs{24} md{8}Col 1/Col Col xs{24} md{8} h{80}Col 2/Col Col xs{24} md{8}Col 3/Col /Row {/* 响应式水平分布 */} Row justify{{ xs: center, md: space-between }} Col xs{8}Col 1/Col Col xs{8}Col 2/Col /Row {/* 主内容 嵌套侧栏 */} Row gutter{{ xs: 8, md: 16 }} Col xs{24} md{16}Main Content/Col Col xs{24} md{8} Row Col xs{12} md{24}Sidebar Top/Col Col xs{12} md{24}Sidebar Bottom/Col /Row /Col /Row {/* 响应式 auto 列 */} Row Col span{{ xs: auto, md: 8 }}xsauto, md8/Col Col span{{ xs: 12, md: auto }}xs12, mdauto/Col Col span{{ xs: auto, md: auto }}xsauto, mdauto/Col /Row /Grid结语rsuite Grid 的 24 列栅格系统核心就三件事Grid定容器宽度、Row管间距与对齐、Col用span在 24 等分中占位。理解span的三种形态数字、auto、响应式对象与六个断点的生效规则后无论是简单的等分布局还是移动端优先的多级响应式页面都可以用同一套组件体系稳定实现。相关的样式生成逻辑src/Grid/styles/_mixin.scss、类名映射逻辑src/Grid/Col.tsx与测试用例src/Grid/test/都已开源需要深究实现细节时可直接对照阅读。赞分享前端UI组件【免费下载链接】rsuite A suite of React components .项目地址https://gitcode.com/gh_mirrors/rs/rsuite点击查看免费下载相关推荐rsuite Grid 布局组件完全指南24 栅格响应式布局系统实战rsuite Grid 布局组件完全指南24 栅格响应式布局系统实战 本指南以 rsuite 官方文档 Grid 组件文档 https://link.gitc前端UI组件NG-ZORRO Grid 栅格系统完全指南24 栅格、Flex 布局与响应式断点实战NG ZORRO Grid 栅格系统完全指南24 栅格、Flex 布局与响应式断点实战 NG ZORRO基于 Ant Design 的 Angular 组件UI组件前端Semi Design Grid 栅格系统完全指南24 栅格、Flex 布局与响应式断点实战Semi Design Grid 栅格系统完全指南24 栅格、Flex 布局与响应式断点实战 本篇指南围绕 Semi Design douyinfe/se前端UI组件设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
