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

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

栅格尺寸

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

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>

栅格偏移

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

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 属性设置栅格宽度。同样地，支持响应式。

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

属性	类型	可选	默认值	描述	版本
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