Layout

Quickly create layouts with basic 12 columns

Platform Compatibility

App(vue)	App(nvue)	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

Basic usage

Use span of the col component to set the ratio of the columns to be divided

vue

<template>
    <view class="wu-page">
        <view class="wu-demo-block">
            <text class="wu-demo-block__title">Basic usage</text>
            <view class="wu-demo-block__content">
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="6">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="6">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                </wu-row>
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-dark"></view>
                    </wu-col>
                </wu-row>
                <wu-row justify="space-between">
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                </wu-row>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.bg-purple {
  background: #ced7e1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>

<template>
    <view class="wu-page">
        <view class="wu-demo-block">
            <text class="wu-demo-block__title">Basic usage</text>
            <view class="wu-demo-block__content">
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="6">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="6">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                </wu-row>
                <wu-row customStyle="margin-bottom: 10px">
                    <wu-col span="4">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="4">
                        <view class="demo-layout bg-purple-dark"></view>
                    </wu-col>
                </wu-row>
                <wu-row justify="space-between">
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple"></view>
                    </wu-col>
                    <wu-col span="3">
                        <view class="demo-layout bg-purple-light"></view>
                    </wu-col>
                </wu-row>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.bg-purple {
  background: #ced7e1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>

column spacing

Specify the interval between each column by setting the gutter parameter of the row component (the final performance is that the left padding is gutter/2), and the default interval is 0

vue

<template>
    <view class="wu-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
        </wu-row>
    </view>
</template>

<style lang="scss">
.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.bg-purple {
  background: #ced7e1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>

<template>
    <view class="wu-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="3">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
        </wu-row>
    </view>
</template>

<style lang="scss">
.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.bg-purple {
  background: #ced7e1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>

mixed layout

By specifying the span attribute of the col component, specify different values to achieve different ratios

vue

<template>
    <view class="u-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="2">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="4">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="6">
                <view class="demo-layout bg-purple-dark"></view>
            </wu-col>
        </wu-row>
    </view>
</template>
<style lang="scss">
.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.bg-purple {
  background: #ced7e1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>

<template>
    <view class="u-demo-block__content">
        <wu-row justify="space-between" gutter="10">
            <wu-col span="2">
                <view class="demo-layout bg-purple-light"></view>
            </wu-col>
            <wu-col span="4">
                <view class="demo-layout bg-purple"></view>
            </wu-col>
            <wu-col span="6">
                <view class="demo-layout bg-purple-dark"></view>
            </wu-col>
        </wu-row>
    </view>
</template>
<style lang="scss">
.wrap {
  padding: 12px;
}

.demo-layout {
  height: 25px;
  border-radius: 4px;
}

.bg-purple {
  background: #ced7e1;
}

.bg-purple-light {
  background: #e5e9f2;
}

.bg-purple-dark {
  background: #99a9bf;
}
</style>

column offset

By specifying the offset attribute of the col component, you can specify the number of columns to offset the column.

html

<view class="u-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

<view class="u-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3" offset="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

alignment

Use the justify of the row component to flexibly align the columns. The optional values are start (or flex-start), end (or flex-end), center, around (or space-around ), between (or space-between ), the final performance is similar to the justify-content property of css.

Note: Due to the special structure of compiled WeChat applets, this method does not support WeChat applets.

html

<view class="wu-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

<view class="wu-demo-block__content">
    <wu-row justify="space-between" customStyle="margin-bottom: 10px">
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
    <wu-row>
        <wu-col span="3">
            <view class="demo-layout bg-purple-light"></view>
        </wu-col>
        <wu-col span="3">
            <view class="demo-layout bg-purple"></view>
        </wu-col>
    </wu-row>
</view>

API

Row Props

property name	description	type	default value	optional values
gutter	grid interval, left and right half of this value, arbitrary unit	String / Number	0	-
justify	Horizontal arrangement (WeChat applets are not currently supported)	String	`start` (or `flex-start` )	`end` (or `flex-end`) / `center` / `around` (or `space-around` ) / `between` (or `space-between`)
align	vertical alignment	String	center	top / bottom

Col Props

property name	description	type	default value	optional values
span	The number of columns occupied by the grid, total 12 equal parts	String / Number	0	0-12
offset	The left offset of the column, the calculation method is the same as span	String / Number	0	-
justify	Horizontal arrangement (WeChat applets are not currently supported)	String	`start` (or `flex-start` )	`end` (or `flex-end`) / `center` / `around` (or `space-around` ) / `between` (or `space-between`)
align	vertical alignment	String	stretch	`top`, `center`, `bottom`, `stretch`
textAlign	text horizontal alignment	String	left	center / right

Row Events

property name	description	callback parameter
click	`row` was clicked	-

Col Events

property name	description	callback parameter
click	`col` is clicked, it will prevent the event from bubbling to `row`	-

Layout ​

Platform Compatibility ​

Basic usage ​

column spacing ​

mixed layout ​

column offset ​

alignment ​

API ​

Row Props ​

Col Props ​

Row Events ​

Col Events ​