mms-col 栅格列

简述

栅格布局系统，和 mms-row 配合使用，总共 24 栅格。

注意

注意： 请以 uni_modules/mms-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基本使用

<template>
	<mms-row :gutter="20">
		<mms-col :span="12">
			<view>
				<text> 一半宽度 </text>
			</view>
		</mms-col>
		<mms-col :span="12">
			<view>
				<text> 一半宽度 </text>
			</view>
		</mms-col>
	</mms-row>
</template>

Props

参数	说明	类型	默认值
span	栅格占据的列数，总共 24	number	24
offset	左侧偏移列数	number	0
width	自定义宽度	number | string	-
padding	自定义左右padding，单位 rpx	number | string	-

插槽

名称	说明
default	列内容

示例

三栏等宽

<mms-row :gutter="10">
	<mms-col :span="8"><view>1/3</view></mms-col>
	<mms-col :span="8"><view>1/3</view></mms-col>
	<mms-col :span="8"><view>1/3</view></mms-col>
</mms-row>

不等宽

<mms-row :gutter="20">
	<mms-col :span="6"><view>1/4</view></mms-col>
	<mms-col :span="18"><view>3/4</view></mms-col>
</mms-row>

偏移

<mms-row :gutter="20">
	<mms-col :span="6" :offset="6">
		<view> 偏移 6 列 </view>
	</mms-col>
</mms-row>