宫格

宫格组件。

列数

通过 cols 属性设置宫格列数。

<template>
	<pure-grid class="grid" cols="3">
		<pure-block class="block" ratio="1:1">
			<view class="content">内容</view>
		</pure-block>
	</pure-grid>
</template>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: orange;
	color: #ffffff;
}
</style>

间隔

通过 gap 属性设置宫格子元素之间的间隔。

<template>
	<!-- 设置为相同的间隔 -->
	<pure-grid class="grid" cols="4" gap="10px">
		<pure-block class="block" ratio="1:1">
			<view class="content">内容</view>
		</pure-block>
	</pure-grid>

	<!-- 垂直方向间隔为 10px，水平方向间隔为 20px -->
	<pure-grid class="grid" cols="4" gap="10px 20px"></pure-grid>
</template>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: orange;
	color: #ffffff;
}
</style>

属性

名称	类型	默认值	说明
cols	[String, Number]		列数
gap	String		子元素之间的间隔

插槽

名称	参数	说明
#default		默认，宫格子元素

样式变量

名称	说明
--pure-grid-columns	列数
--pure-grid-gap	宫格子元素之间的间隔