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 12 | Width 50%

Span 8 | Width 33.3333%

Span 8 | Width 33.3333%

Span 8 | Width 33.3333%

Span 6 | Width 25%

Span 6 | Width 25%

Span 6 | Width 25%

Span 6 | Width 25%

Span 4 | Width 16.6667%

Span 4 | Width 16.6667%

Span 4 | Width 16.6667%

Span 4 | Width 16.6667%

Span 4 | Width 16.6667%

Span 4 | Width 16.6667%

Column 16

Span 8 | Width 50%

Span 8 | Width 50%

Span 4 | Width 25%

Span 4 | Width 25%

Span 4 | Width 25%

Span 4 | Width 25%

Responsive

Span 4

Span 4

Span 4

Span 4

隐藏源代码

栅格尺寸

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

Span 6 | Width 25%

Span 6 | Width 25%

Span 6 | Width 25%

Span 6 | Width 25%

Responsive

Responsive

Responsive

Responsive

Responsive

Responsive

隐藏源代码

栅格偏移

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

Span 6 | Offset 6

Span 8 | Offset 4

Span 6 | Offset Responsive

隐藏源代码

栅格间隔

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

x: 4px, y: 4px

Content

Content

Content

Content

x: 8px, y: 4px

Content

Content

Content

Content

Responsive

Content

Content

Content

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>