Grid 网格
响应式等宽列布局,通过 columns 及断点前缀控制不同屏幕宽度下的列数。
使用提示
- 适合:指标看板、卡片列表、表单字段的水平等宽分组。
- 不适合:非等宽混合布局(应当用 row + column 组合)、单列垂直排列(应当用 column)。
- 关联组件:row 水平排列但不保证等宽,column 垂直排列。
- 子组件自动等宽,适合同层级内容。
gap用于覆盖网格项间距;省略时使用主题 CSS 默认间距。
columns 变体
namespace: "doc_grid_columns_diff",
layout: {
"column:demo": {
"text:cols2": {
text: "columns: 2"
},
"grid:cols2": {
columns: 2,
"stat:a": {
label: "A",
value: "1"
},
"stat:b": {
label: "B",
value: "2"
},
"stat:c": {
label: "C",
value: "3"
}
},
"text:cols3": {
text: "columns: 3"
},
"grid:cols3": {
columns: 3,
"stat:a": {
label: "A",
value: "1"
},
"stat:b": {
label: "B",
value: "2"
},
"stat:c": {
label: "C",
value: "3"
}
}
}
}
}