eo-grid-layout
<eo-grid-layout>Alias:
<containers.grid-layout>多行多列的响应式网格布局。
Properties
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
columns | 网格布局列数（各列等宽） | number | ||
rows | 网格布局行数 | number | 1 | |
rowSpan | 在父级网格中所占行数 | number | 1 | |
columnSpan | 在父级网格中所占列数 | number | 1 | |
templateColumns | 网格布局模板列 | string | ||
alignItems | 设置单元格的垂直位置 | CSSProperties["alignItems"] | ||
alignContent | 设置整个内容区域的垂直位置 | CSSProperties["alignContent"] | ||
justifyItems | 设置单元格内容的水平位置 | CSSProperties["justifyItems"] | ||
justifyContent | 设置整个内容区域在容器里面的水平位置 | CSSProperties["justifyContent"] | ||
autoFlow | 子元素自动排布顺序 | CSSProperties["gridAutoFlow"] | ||
responsive | 响应式布局设置 | ResponsiveSettings | ||
gap | 子元素之间的间距 | string | "var(--page-card-gap)" | |
showGridBorder | 是否展示网格布局边框 | boolean | false | |
gridBorderColor | 网格布局边框颜色 | string |
Type references
ResponsiveSettings
| Name | Type | Required | Description |
|---|---|---|---|
large | GridSettings | ||
medium | GridSettings | ||
small | GridSettings | ||
xs | GridSettings |
GridSettings
| Name | Type | Required | Description |
|---|---|---|---|
columns | number | ||
rows | number | ||
templateColumns | string | ||
columnSpan | number | ||
rowSpan | number |