🌏 Translated with the assistance of DeepSeek and ChatGPT

Grid

A grid component based on CSS Grid layout, providing responsive layouts to make pages adapt to different screen widths more easily. Its functionality is similar to the Flex component. If you prefer Grid layouts, you can try this component.

Basic Usage

The Grid component divides the content area into 24 columns by default, which can be adjusted using the column property. The column property supports responsiveness. Like the Flex component, 'xs', 'sm', 'md', 'lg', 'xl', and 'xxl' correspond to window pixel widths of $[0, 576]$, $(576, 768]$, $(768, 992]$, $(992, 1200]$, $(1200, 1600]$, and $(1600, +\infty)$ respectively.

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

Hide source code

Grid Size

The span property of GridItem sets the grid width.

Span 6 | Width 25%

Span 6 | Width 25%

Span 6 | Width 25%

Span 6 | Width 25%

Responsive

Responsive

Responsive

Responsive

Responsive

Responsive

Hide source code

Grid Offset

The offset property of GridItem sets the grid offset. It also supports responsiveness.

Span 6 | Offset 6

Span 8 | Offset 4

Span 6 | Offset Responsive

Hide source code

Grid Gutter

The gutter property of Grid sets the spacing between GridItems. It also supports responsiveness.

x: 4px, y: 4px

Content

Content

Content

Content

x: 8px, y: 4px

Content

Content

Content

Content

Responsive

Content

Content

Content

Content

Hide source code

API

GridProps

Attribute	Type	Optional	Default	Description	Version
column	number | ValueWithDeviceWidth<number>	True	24	Number of columns in the Grid content area.	0.0.0-beta
gutter	number | { x?: number; y?: number } | Value4DeviceWidth<number | { x?: number; y?: number }>	True	0	Spacing between GridItem components.	0.0.0-beta

GridSlots

Slot	Parameter	Description	Version
default		GridItem components.	0.0.0-beta

GridItemProps

Attribute	Type	Optional	Default	Description	Version
offset	number | ValueWithDeviceWidth<number>	True	0	Left offset of GridItem.	0.0.0-beta
span	number | ValueWithDeviceWidth<number>	True		The width of GridItem defaults to the column attribute of Grid.	0.0.0-beta

GridItemSlots

Slot	Parameter	Description	Version
default		Content of 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>