Grid

🌏 Translated with the assistance of DeepSeek and ChatGPT

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 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

<template>
	<h4>Column 24</h4>
	<px-grid>
		<px-grid-item :span="24"><div class="item">Span 24 | Width 100%</div></px-grid-item>
		<px-grid-item :span="12"><div class="item">Span 12 | Width 50%</div></px-grid-item>
		<px-grid-item :span="12"><div class="item">Span 12 | Width 50%</div></px-grid-item>
		<px-grid-item :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-grid-item>
		<px-grid-item :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-grid-item>
		<px-grid-item :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-grid-item>
	</px-grid>
	<h4>Column 16</h4>
	<px-grid :column="16">
		<px-grid-item :span="8"><div class="item">Span 8 | Width 50%</div></px-grid-item>
		<px-grid-item :span="8"><div class="item">Span 8 | Width 50%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 25%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 25%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 25%</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4 | Width 25%</div></px-grid-item>
	</px-grid>
	<h4>Responsive</h4>
	<px-grid :column="column">
		<px-grid-item :span="4"><div class="item">Span 4</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4</div></px-grid-item>
		<px-grid-item :span="4"><div class="item">Span 4</div></px-grid-item>
	</px-grid>
</template>
<script setup lang="ts">
const column = {
	xxl: 24,
	xl: 20,
	lg: 16,
	md: 12,
	sm: 8,
	xs: 4
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-grid {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-grid:last-of-type {
	margin-bottom: 0px;
}
.px-grid .px-grid-item:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-grid .px-grid-item:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Grid Size

The span property of GridItem sets the grid width.

Span 6 | Width 25%

Responsive

<template>
	<px-grid>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Span 6 | Width 25%</div></px-grid-item>
	</px-grid>
	<px-grid>
		<px-grid-item :span="span"><div class="item">Responsive</div></px-grid-item>
		<px-grid-item :span="span"><div class="item">Responsive</div></px-grid-item>
		<px-grid-item :span="span"><div class="item">Responsive</div></px-grid-item>
		<px-grid-item :span="span"><div class="item">Responsive</div></px-grid-item>
		<px-grid-item :span="span"><div class="item">Responsive</div></px-grid-item>
		<px-grid-item :span="span"><div class="item">Responsive</div></px-grid-item>
	</px-grid>
</template>
<script setup lang="ts">
const span = {
	xxl: 4,
	xl: 6,
	lg: 8,
	md: 12,
	sm: 12,
	xs: 24
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-grid {
	margin-bottom: 16px;
}
.px-grid:last-of-type {
	margin-bottom: 0px;
}
.px-grid .px-grid-item:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-grid .px-grid-item:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

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

<template>
	<px-grid>
		<px-grid-item :span="6" :offset="6"><div class="item">Span 6 | Offset 6</div></px-grid-item>
		<px-grid-item :span="8" :offset="4"><div class="item">Span 8 | Offset 4</div></px-grid-item>
	</px-grid>
	<px-grid>
		<px-grid-item :span="6" :offset="offset"
			><div class="item">Span 6 | Offset Responsive</div></px-grid-item
		>
	</px-grid>
</template>
<script setup lang="ts">
const offset = {
	xxl: 18,
	xl: 12,
	lg: 8,
	md: 6,
	sm: 4,
	xs: 0
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-grid {
	margin-bottom: 16px;
}
.px-grid:last-of-type {
	margin-bottom: 0px;
}
.px-grid .px-grid-item:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-grid .px-grid-item:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Grid Gutter

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

x: 4px, y: 4px

Content

x: 8px, y: 4px

Content

Responsive

Content

<template>
	<h4>x: 4px, y: 4px</h4>
	<px-grid :gutter="4">
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
	</px-grid>
	<h4>x: 8px, y: 4px</h4>
	<px-grid :gutter="{ x: 8, y: 4 }">
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
	</px-grid>
	<h4>Responsive</h4>
	<px-grid :gutter="gutter">
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
		<px-grid-item :span="6"><div class="item">Content</div></px-grid-item>
	</px-grid>
</template>
<script setup lang="ts">
const gutter = {
	xxl: 24,
	xl: 16,
	lg: 12,
	md: 8,
	sm: 4,
	xs: 2
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-grid {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-grid:last-of-type {
	margin-bottom: 0px;
}
.px-grid .px-grid-item:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-grid .px-grid-item:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

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>

Grid ​

Basic Usage ​

Column 24

Column 16

Responsive

Grid Size ​

Grid Offset ​

Grid Gutter ​

x: 4px, y: 4px

x: 8px, y: 4px

Responsive

API ​

GridProps ​

GridSlots ​

GridItemProps ​

GridItemSlots ​

ValueWithDeviceWidth ​

Grid

Basic Usage

Grid Size

Grid Offset

Grid Gutter

API

GridProps

GridSlots

GridItemProps

GridItemSlots

ValueWithDeviceWidth