m-col 栅格列

简述

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

注意

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

平台差异说明

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

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/extensions/extensions
线上 H5（hash）	打开演示

基本使用

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

Props

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

插槽

名称	说明
default	列内容

示例

三栏等宽

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

不等宽

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

偏移

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