示例
直接操作示例，查看组件在具体任务中的状态与反馈。
证据概览
API
公开导出与 Props 已核对
类型
源码和包消费入口保持一致
视觉
最终浏览器证据仍列为 Beta 限制
三列指标
API 45
示例 156
分类 7
顶部对齐
短内容
较高内容
拉伸
短内容
较高内容
组件分类
查看该分类的公开组件和示例。
查看该分类的公开组件和示例。
查看该分类的公开组件和示例。
查看该分类的公开组件和示例。
使用建议
列合同必须明确
固定等分列可使用正整数；复杂布局传入可审查的 grid-template-columns 字符串。
窄屏策略由 CSS 表达
简单卡片集合可以使用 auto-fit 与 minmax；产品断点仍通过宿主 className、style 或样式表维护。
视觉位置不能替代语义顺序
先按阅读顺序组织 DOM，再定义列；不要让二维排布导致屏幕阅读器和键盘顺序难以理解。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseGrid } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Grid 不提供 breakpoint 对象、自动 masonry、行列跨度快捷属性或视觉重排；复杂网格规则由宿主 CSS 负责。
- Automated axe checks and deterministic browser visual evidence are pending T17/T23.
API
查看组件源码export interface BaseGridProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'style'
> {
children?: ReactNode;
columns?: BaseGridColumns;
gap?: BaseLayoutLength;
align?: BaseLayoutAlign;
justify?: BaseLayoutJustify;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseGridClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
children | 在 BaseGrid 内渲染的子内容；支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
columns | 列定义或列数量；具体结构以当前组件的 Props 类型为准。 | BaseGridColumns | 1 |
gap | 子项之间的间距。 | BaseLayoutLength | — |
align | 内容在对应轴线或单元格中的对齐方式。 | BaseLayoutAlign | 'stretch' |
justify | 子项在主轴方向上的分布方式。 | BaseLayoutJustify | 'start' |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseGridClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |