栅格布局，将整个屏幕宽度分为 24个单位，每个单位的大小，由当前屏幕尺寸决定。

支持平台

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

代码演示

部分示例演示，完整使用请参考文档API。

基础布局

通过 span 属性设置栅格占据的列数，默认值为24。

<wui-row margin-bottom="24rpx">
<wui-col>
  <view class="wui-col__item wui-color__black"></view>
</wui-col>
</wui-row>
<wui-row margin-bottom="24rpx">
<wui-col :span="12">
  <view class="wui-col__item wui-color__black"></view>
</wui-col>
<wui-col :span="12">
  <view class="wui-col__item wui-color__yellow"></view>
</wui-col>
</wui-row>

分栏偏移

通过 offset 属性设置栅格左侧的间隔格数。

<wui-row marginBottom="10px">
<wui-col :span="8">
  <view class="wui-col__item wui-color__black"></view>
</wui-col>
<wui-col :span="8" :offset="6">
  <view class="wui-col__item wui-color__yellow"></view>
</wui-col>
</wui-row>

<wui-row marginBottom="10px">
<wui-col :span="6" :offset="6">
  <view class="wui-col__item wui-color__black"></view>
</wui-col>
<wui-col :span="6" :offset="6">
  <view class="wui-col__item wui-color__yellow"></view>
</wui-col>
</wui-row>

Slots

wui-row

插槽名称	说明
default	标签显示内容，内部由一个或多个wui-col组成

wui-col

插槽名称	说明
default	标签内显示的自定义内容

Props

wui-row

属性名	类型	说明	默认值	平台差异说明
isFlex	Boolean	是否为flex布局	false	非nvue有效，nvue端默认为flex布局
justify	String	flex布局下的水平排列方式，可取值：start、end、center、space-around、space-between	start	-
align	String	flex布局下的垂直排列方式，可取值：top、middle、bottom	top	-
marginTop	String	margin-top值	0	-
marginBottom	String	margin-bottom值	0	-
gutter	Number	栅格间隔，单位rpx	0	-
width	String, Number	nvue如果使用span等属性，需要配置宽度，单位rpx	750	仅nvue有效

wui-col

属性名	类型	说明	默认值	平台差异说明
span	Number	栅格占据的列数	24	-
offset	Number	栅格左侧的间隔格数	0	-
pushLeft	Number	栅格向右移动格数	-1	-
pullRight	Number	栅格向左移动格数	-1	-
xs	Number, Object	max-width:767px 响应式栅格数或者栅格属性对象，Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4}	-1	非nvue有效
sm	Number, Object	max-width:768px 响应式栅格数或者栅格属性对象	-1	非nvue有效
md	Number, Object	max-width:992px 响应式栅格数或者栅格属性对象	-1	非nvue有效
lg	Number, Object	max-width:1200px 响应式栅格数或者栅格属性对象	-1	非nvue有效
xl	Number, Object	max-width:1920px 响应式栅格数或者栅格属性对象	-1	非nvue有效

Events

事件名	说明	回调参数
-	-	-