Ant Design Grid 基础栅格完全指南用 Row 与 Col 实现从堆叠到水平排列的 24 栅格系统【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design导读本文以 Ant Design 官方「基础栅格Basic Grid」演示为起点系统讲解Row与Col这对核心布局组件的使用规则与底层原理从从堆叠到水平排列这一最简单的栅格形态出发你将掌握 24 等分栅格的划分方式、span占位逻辑、列超宽换行行为并通过阅读仓库源码理解栅格在 Flex 布局下的真实实现为后续使用gutter、offset、响应式断点等高级能力打下基础。从一条演示说起基础栅格在做什么官方演示 components/grid/demo/basic.md 的说明非常凝练从堆叠到水平排列。使用单一的一组Row和Col栅格组件就可以创建一个基本的栅格系统所有列Col必须放在Row内。这段话包含了两个关键约定一个基本的栅格系统只需要RowCol两组组件不需要任何额外配置Col必须放在Row内部这是栅格组件之间唯一的合法父子关系。对应的完整示例代码位于 components/grid/demo/basic.tsximport React from react; import { Col, Row } from antd; const App: React.FC () ( Row Col span{24}col/Col /Row Row Col span{12}col-12/Col Col span{12}col-12/Col /Row Row Col span{8}col-8/Col Col span{8}col-8/Col Col span{8}col-8/Col /Row Row Col span{6}col-6/Col Col span{6}col-6/Col Col span{6}col-6/Col Col span{6}col-6/Col /Row / ); export default App;这段代码只使用了Row与Col的span一个属性却完整展示了 4 种最常见的栅格排布整行单列24、两等分1212、三等分888、四等分6666。从堆叠到水平排列描述的正是在默认块级流式布局下纵向堆叠的 DOM 元素被Row的 Flex 容器编排为水平排列的列的过程。为什么是 24栅格系统的设计理念span的取值范围来自 Ant Design 的 24 栅格设计。组件文档 components/grid/index.zh-CN.md 的「设计理念」一节说明在多数业务情况下Ant Design 需要在设计区域内解决大量信息收纳的问题因此在 12 栅格系统的基础上我们将整个设计建议区域按照 24 等分的原则进行划分。……建议横向排列的盒子数量最多四个最少一个。选择 24 等分的优势在于其因子丰富24 可被 2、3、4、6、8、12 整除因此无论是要做两列、三列、四列还是六列布局都能用整数span精确等分避免出现小数宽度。示例中的 12/8/6 正是 24 分别除以 2/3/4 的结果。源码视角span 在底层如何变成宽度span并不是魔法它在编译期被转换成固定的 CSS 类名如ant-col-8再由样式系统生成对应的百分比宽度。核心逻辑位于 components/grid/style/index.ts 的genLoopGridColumnsStyleconst { prefixCls, componentCls, gridColumns } token; // gridColumns: 24 —— Row is divided into 24 parts in Grid第 186 行样式生成循环从 24 一直遍历到 0对每个栅格数i生成{ display: var(--ant-display), // 支持被 Form 等组件覆盖 display flex: 0 0 ${(i / gridColumns) * 100}%, maxWidth: ${(i / gridColumns) * 100}%, }也就是说Col span{8} /最终得到的是flex: 0 0 33.333%max-width: 33.333%。flex: 0 0 X%表示不放大、不缩小、基础宽度为 X%这正是栅格列等宽、稳定的根本保证。同时genGridColStyle为所有列设置了position: relative; max-width: 100%; min-height: 1防止空列塌陷。值得注意的是span{0}的特例样式循环里对i 0单独生成display: none因此官方文档将span的 0 值描述为相当于display: none这也在源码中得到了印证。Row本身则是一个 Flex 容器。在 components/grid/style/index.ts 的genGridRowStyle中[componentCls]: { display: flex, flexFlow: row wrap, minWidth: 0, ... }flexFlow: row wrap意味着主轴水平、允许换行——这正好解释了文档中的另一条规则如果一个row中的col总和超过 24多余的col会作为一个整体另起一行排列。换行能力来自 Flex 的wrap特性而非任何额外逻辑。规则细化谁可以放在 Row 里组件文档 components/grid/index.zh-CN.md 的「概述」一节总结了基础栅格的完整使用规则通过row在水平方向建立一组column简写 col你的内容应当放置于col内并且只有col可以作为row的直接元素栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如三个等宽的列可以使用Col span{8} /来创建如果一个row中的col总和超过 24那么多余的col会作为一个整体另起一行排列。只有Col可以作为Row的直接元素是一条值得强调的约定Row的子元素会被套用 Flex 布局并接收来自RowContext的gutter、wrap信息见 components/grid/RowContext.ts只有Col会消费这些上下文非Col子元素虽然能正常渲染但无法获得栅格间距等能力。由基础延伸Row 与 Col 的属性全景理解了基础栅格再看Row/Col的完整 API 就水到渠成。两者类型定义分别位于 components/grid/row.tsx 与 components/grid/col.tsx。Row 的属性参数说明类型默认值align垂直对齐方式top|middle|bottom|stretch或按断点的响应式对象topgutter栅格间隔像素值、响应式对象{ xs: 8, sm: 16, md: 24 }或数组[水平间距, 垂直间距]number | object | array0justify水平排列方式start|end|center|space-around|space-between|space-evenly或响应式对象startwrap是否自动换行booleantrue源码中的取值常量给出了精确范围components/grid/row.tsxconst RowAligns [top, middle, bottom, stretch] as const; const RowJustify [ start, end, center, space-around, space-between, space-evenly, ] as const;Col 的属性参数说明类型默认值span栅格占位格数为 0 时相当于display: nonenumber-offset栅格左侧的间隔格数间隔内不可以有栅格number0order栅格顺序number0push栅格向右移动格数number0pull栅格向左移动格数number0flexflex 布局属性string | number-xs / sm / md / lg / xl / xxl响应式栅格可为栅格数或包含 span/offset/order 等的对象number | object-Col的类型定义components/grid/col.tsx还揭示了ColSize的完整形态export interface ColSize { flex?: FlexType; span?: ColSpanType; order?: ColSpanType; offset?: ColSpanType; push?: ColSpanType; pull?: ColSpanType; }即响应式断点属性除了接收数字等价于span还可以接收一个包含span、offset、push、pull、order、flex的对象。gutter的间距实现值得一提Row把水平间距的一半以负 margin 施加在自身marginLeft gutter[0] / -2Col通过RowContext拿到gutter后把一半以 padding 施加在列上paddingLeft/Right gutter[0] / 2从而在不破坏列宽百分比的前提下实现等宽间隔。相关实现见 components/grid/row.tsx 与 components/grid/col.tsx官方演示 components/grid/demo/gutter.tsx 展示了数字、响应式对象、数组三种写法Row gutter{16} {/* 固定水平间距 */} Row gutter{{ xs: 8, sm: 16, md: 24, lg: 32 }} / {/* 响应式间距 */} Row gutter{[16, 24]} {/* [水平间距, 垂直间距] */}断点与响应式基础栅格的进阶方向基础栅格只有span而实际项目中更常用的是响应式栅格。断点规则同样记录在 components/grid/index.zh-CN.md并扩展自 Bootstrap 4 的规则断点屏幕范围xs屏幕 576pxsm屏幕 ≥ 576pxmd屏幕 ≥ 768pxlg屏幕 ≥ 992pxxl屏幕 ≥ 1200pxxxl屏幕 ≥ 1600px这些断点对应的媒体查询在 components/_util/responsiveObserver.ts 中基于主题 Token 生成const getResponsiveMap (token: GlobalToken): BreakpointMap ({ xs: (max-width: ${token.screenXSMax}px), sm: (min-width: ${token.screenSM}px), md: (min-width: ${token.screenMD}px), lg: (min-width: ${token.screenLG}px), xl: (min-width: ${token.screenXL}px), xxl: (min-width: ${token.screenXXL}px), });Row会通过useResponsiveObserver订阅窗口媒体查询变化components/grid/row.tsx 中subscribe/unsubscribe成对出现因此gutter、align、justify传入对象形式时能随屏幕实时切换。断点值可通过主题 Tokenscreen[XS|SM|MD|LG|XL|XXL]定制。测试如何验证这些行为仓库测试 components/grid/tests/index.test.tsx 用大量用例固化了上文所述的实现事实可作为深入理解栅格行为的对照对象与数组形式的gutter都会在Row上产生负 margin如gutter{[16, 20]}时marginLeft/marginRight为-8px大屏 mock 下gutter{[{ xs: 8, ... xl: 40 }, ...]}得到-20px的边距验证了响应式间距的按断点取最近命中值逻辑align/justify的响应式对象只在命中断点如xs时生成ant-row-middle、ant-row-center类未命中断点如lg时不生成justifyspace-evenly会真实产生justify-content: space-evenly的计算样式Row卸载时会调用useResponsiveObserver的unsubscribe避免内存泄漏。小结与继续探索至此你已经完整掌握了 Ant Design 基础栅格的核心组件骨架Row负责水平编排Col负责占位所有Col必须放在Row内宽度机制span通过 24 等分换算为flex: 0 0 (span/24*100)%的百分比宽度总和超过 24 时自动换行实现原理整套系统构建在 Flex 布局之上Row是display: flex; flex-flow: row wrap的容器进阶路径gutter、offset、push/pull、order与xs~xxl断点构成了从基础栅格通向响应式布局的完整能力集。如果想继续深入建议按以下路径阅读仓库更多演示间距、偏移、排序、对齐、响应式、Flex 填充components/grid/demo 目录下的gutter.tsx、offset.tsx、sort.tsx、responsive.tsx等完整 API 文档components/grid/index.zh-CN.md组件入口与导出components/grid/index.tsx同时导出了useBreakpointHook样式生成细节components/grid/style/index.ts响应式订阅机制components/_util/responsiveObserver.ts。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/ant/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考