Grid 栅格 Grid

基于 CSS Grid 布局的栅格组件，提供响应式布局，让页面适配不同屏宽更轻松。功能和 Flex 组件类似，如果你喜欢 Grid 布局，可以试试这个组件。

基础使用

Grid 组件默认把内容区域等分为 24 份，可以通过 column 属性进行调整。column 属性支持响应式。和 Flex 组件一样，'xs'、'sm'、'md'、'lg'、'xl'、'xxl' 分别对应 $[0, 576]$ 、 $(576, 768]$ 、 $(768, 992]$ 、 $(992, 1200]$ 、 $(1200, 1600]$ 、 $(1600, +\infty]$ 的窗口像素宽度。

Column 24

Span 24 | Width 100%

Span 12 | Width 50%

Span 8 | Width 33.3333%

Span 6 | Width 25%

Span 4 | Width 16.6667%

Column 16

Span 8 | Width 50%

Span 4 | Width 25%

Responsive

Span 4

隐藏源代码

栅格尺寸

GridItem 的 span 属性设置栅格宽度。

Span 6 | Width 25%

Responsive

隐藏源代码

栅格偏移

GridItem 的 offset 属性设置栅格宽度。同样地，支持响应式。

Span 6 | Offset 6

Span 8 | Offset 4

Span 6 | Offset Responsive

隐藏源代码

栅格间隔

Grid 的 gutter 属性设置栅格宽度。同样地，支持响应式。

x: 4px, y: 4px

Content

x: 8px, y: 4px

Content

Responsive

Content

隐藏源代码

API

GridProps

属性	类型	可选	默认值	描述	版本
column	`number \| ValueWithDeviceWidth<number>`	是	`24`	Grid 内容区域等分列数。	0.0.0-beta
gutter	`number \| { x?: number; y?: number } \| Value4DeviceWidth<number \| { x?: number; y?: number }>`	是	`0`	子组件 GridItem 之间的间隔。	0.0.0-beta

GridSlots

插槽	参数	描述	版本
default		子组件 GridItem。	0.0.0-beta

GridItemProps

属性	类型	可选	默认值	描述	版本
offset	`number \| ValueWithDeviceWidth<number>`	是	`0`	GridItem 左侧偏移。	0.0.0-beta
span	`number \| ValueWithDeviceWidth<number>`	是		GridItem 宽度，默认为 Grid 的 `column` 属性。	0.0.0-beta

GridItemSlots

插槽	参数	描述	版本
default		GridItem 内容。	0.0.0-beta

ValueWithDeviceWidth

enum SCREEN_SIZE_TYPE {
	XS = 'xs',
	SM = 'sm',
	MD = 'md',
	LG = 'lg',
	XL = 'xl',
	XXL = 'xxl'
}

type ValueWithDeviceWidth<T> = Record<SCREEN_SIZE_TYPE, T>

Grid 栅格 Grid ​

基础使用 ​

Column 24

Column 16

Responsive

栅格尺寸 ​

栅格偏移 ​

栅格间隔 ​

x: 4px, y: 4px

x: 8px, y: 4px

Responsive

API ​

GridProps ​

GridSlots ​

GridItemProps ​

GridItemSlots ​

ValueWithDeviceWidth ​

Grid 栅格 Grid

基础使用

栅格尺寸

栅格偏移

栅格间隔

API

GridProps

GridSlots

GridItemProps

GridItemSlots

ValueWithDeviceWidth