Grid
Responsive equal-width column layout with breakpoint-prefixed column count.
Usage Notes
- Use for metric dashboards, card lists, and horizontal equal-width groups of form fields.
- Not suitable for mixed-width layouts (use
row+columncombinations) or single-column arrangements (usecolumn). - Related components:
rowfor horizontal layout without equal-width guarantees,columnfor vertical layout. - Child components are automatically equal-width — best for same-level content.
- Use
gapto override the spacing; when omitted, the grid keeps its theme CSS default.
Column variants
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"
}
}
}
}
}