Row

🌏 Translated with the assistance of DeepSeek and ChatGPT

A grid component based on CSS Flex layout, providing responsive layout to make it easier for pages to adapt to different screen widths.

Basic Usage

The Row component divides the content area into 24 equal parts.

Span 24 | Width 100%

Span 12 | Width 50%

Span 8 | Width 33.3333%

Span 6 | Width 25%

Span 4 | Width 16.6667%

<template>
	<px-row>
		<px-col :span="24"><div class="item">Span 24 | Width 100%</div></px-col>
		<px-col :span="12"><div class="item">Span 12 | Width 50%</div></px-col>
		<px-col :span="12"><div class="item">Span 12 | Width 50%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
	</px-row>
</template>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Grid Size

The span property of Col sets the grid width. 'xs', 'sm', 'md', 'lg', 'xl', and 'xxl' correspond to the window pixel widths of $[0, 576]$ , $(576, 768]$ , $(768, 992]$ , $(992, 1200]$ , $(1200, 1600]$ , and $(1600, +\infty)$ , respectively.

Span 6 | Width 25%

Responsive

<template>
	<px-row>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
	</px-row>
	<px-row>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
		<px-col :span="span"><div class="item">Responsive</div></px-col>
	</px-row>
</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-row {
	margin-bottom: 16px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Grid Offset

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

Span 6 | Offset 6

Span 8 | Offset 4

Span 6 | Offset Responsive

<template>
	<px-row>
		<px-col :span="6" :offset="6"><div class="item">Span 6 | Offset 6</div></px-col>
		<px-col :span="8" :offset="4"><div class="item">Span 8 | Offset 4</div></px-col>
	</px-row>
	<px-row>
		<px-col :span="6" :offset="offset"
			><div class="item">Span 6 | Offset Responsive</div></px-col
		>
	</px-row>
</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-row {
	margin-bottom: 16px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Grid Gutter

The gutter property of Row sets the grid gutter. It also supports responsiveness.

x: 4px, y: 4px

Content

x: 8px, y: 4px

Content

Responsive

Content

<template>
	<h4>x: 4px, y: 4px</h4>
	<px-row :gutter="4">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>x: 8px, y: 4px</h4>
	<px-row :gutter="{ x: 8, y: 4 }">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Responsive</h4>
	<px-row :gutter="gutter">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
</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-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Horizontal Alignment

The justify property of Row sets the horizontal alignment.

Flex Start

Content

Flex End

Content

Center

Content

Space Between

Content

Space Around

Content

Space Evenly

Content

<template>
	<h4>Flex Start</h4>
	<px-row justify="start">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Flex End</h4>
	<px-row justify="end">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Center</h4>
	<px-row justify="center">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Space Between</h4>
	<px-row justify="space-between">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Space Around</h4>
	<px-row justify="space-around">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Space Evenly</h4>
	<px-row justify="space-evenly">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
</template>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>

Vertical Alignment

The align property of Row sets the vertical alignment.

Flex Start

Content

Flex End

Content

Center

Content

Stretch

Content

<template>
	<h4>Flex Start</h4>
	<px-row align="start">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Flex End</h4>
	<px-row align="end">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Center</h4>
	<px-row align="center">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Stretch</h4>
	<px-row align="stretch">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
</template>
<style lang="css" scoped>
.item {
	min-height: 64px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
.px-row .px-col:nth-child(odd) .item {
	min-height: 96px;
}
</style>

API

RowProps

Attribute	Type	Optional	Default	Description	Version
gutter	`number \| { x?: number; y?: number } \| Value4DeviceWidth<number \| { x?: number; y?: number }>`	True	`0`	The interval between child components Col.	0.0.0-beta
justify	`'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between' \| 'space-evenly'`	True	`'start'`	The horizontal alignment of Row, based on the CSS `justify-content` property.	0.0.0-beta
align	`'start' \| 'center' \| 'end' \| 'stretch'`	True	`'start'`	The vertical alignment of Row, based on the CSS `align-items` property.	0.0.0-beta
wrap	`boolean`	True	`true`	Whether Child components Col can wrap.	0.0.0-beta

RowSlots

Slot	Parameter	Description	Version
default		Child components Col.	0.0.0-beta

ColProps

Attribute	Type	Optional	Default	Description	Version
offset	`number \| ValueWithDeviceWidth<number>`	True	`0`	The offset to the left of Col.	0.0.0-beta
span	`number \| ValueWithDeviceWidth<number>`	True	`24`	The width of Col.	0.0.0-beta

ColSlots

Slot	Parameter	Description	Version
default		The Col's content.	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>

Row ​

Basic Usage ​

Grid Size ​

Grid Offset ​

Grid Gutter ​

x: 4px, y: 4px

x: 8px, y: 4px

Responsive

Horizontal Alignment ​

Flex Start

Flex End

Center

Space Between

Space Around

Space Evenly

Vertical Alignment ​

Flex Start

Flex End

Center

Stretch

API ​

RowProps ​

RowSlots ​

ColProps ​

ColSlots ​

ValueWithDeviceWidth ​

Row

Basic Usage

Grid Size

Grid Offset

Grid Gutter

Horizontal Alignment

Vertical Alignment

API

RowProps

RowSlots

ColProps

ColSlots

ValueWithDeviceWidth