Grid 栅格布局
Grid 组件有两种使用方式:
- 基础用法:如果传给
grid
组件的cols
属性是number
类型,则表示固定列数。 - 响应式布局: 如果传给
grid
组件的cols
属性是object
类型,表示响应式布局。 - 二者兼得:你也可以给
grid
组件的cols
属性传入函数,详情请查看 响应式布局。
TIP
grid
组件的 cols
属性为 object
类型时,受到 BreakCols
类型的约束。
ts
/** 断点列 */
export interface BreakCols {
/** 超小尺寸 */
xs?: number
/** 小尺寸 */
sm?: number
/** 中等尺寸 */
md?: number
/** 大尺寸 */
lg?: number
/** 中大尺寸 */
xl?: number
/** 默认尺寸 */
default?: number
}
基础用法
默认情况下 grid
是一个 24 格栅格布局,当然你可以通过 cols
属性来重置它。
响应式布局
通过 cols
属性来设置不同断点下的列数。