Layout

17:06

Description

ux-row is the 12-column grid container: it lays out columns with flex and wrap, gutter sets the spacing (half of it on each side, injected into the columns), and justify / align control the overall horizontal and vertical alignment. ux-col is a grid cell: span is how many of the 12 parts it occupies (width = span / 12 × 100%), and offset shifts it from the left.

Compatibility

Platform	Support
App	✅ Supported
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

basic

Minimal ux-row + ux-col combo: gutter=5, with two span=6 columns each taking half the width.

View source

<template>
    <ux-row :gutter="5">
        <ux-col :span="6">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="6">
            <view class="block block-success" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
</style>

span

span sets how many of the 12 parts each column takes: 4 / 4 / 4 on the first row, 8 / 4 on the second.

View source

<template>
    <ux-row :gutter="5">
        <ux-col :span="4">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="4">
            <view class="block block-success" />
        </ux-col>
        <ux-col :span="4">
            <view class="block block-warning" />
        </ux-col>
    </ux-row>
    <view class="gap" />
    <ux-row :gutter="5">
        <ux-col :span="8">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="4">
            <view class="block block-error" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.gap {
    height: 12px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
.block-warning {
    background-color: #ff9900;
}
.block-error {
    background-color: #fa3534;
}
</style>

offset

offset leaves the given number of parts empty on the left; here the second span=4 column is offset by 4.

View source

<template>
    <ux-row :gutter="5">
        <ux-col :span="4">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="4" :offset="4">
            <view class="block block-success" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
</style>

gutter

With gutter=20, adjacent columns are 20px apart (10px padding on each side of every column).

View source

<template>
    <ux-row :gutter="20">
        <ux-col :span="3">
            <view class="block block-primary" />
        </ux-col>
        <ux-col :span="3">
            <view class="block block-success" />
        </ux-col>
        <ux-col :span="3">
            <view class="block block-warning" />
        </ux-col>
        <ux-col :span="3">
            <view class="block block-error" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
.block-warning {
    background-color: #ff9900;
}
.block-error {
    background-color: #fa3534;
}
</style>

align

justify and align control the horizontal and vertical alignment within the row; here space-between + bottom.

View source

<template>
    <ux-row justify="space-between" align="bottom">
        <ux-col :span="6">
            <view class="block block-primary" :style="{ height: '50px' }" />
        </ux-col>
        <ux-col :span="6">
            <view class="block block-success" />
        </ux-col>
    </ux-row>
</template>

<style scoped>
.block {
    height: 40px;
    border-radius: 4px;
}
.block-primary {
    background-color: #2979ff;
}
.block-success {
    background-color: #19be6b;
}
</style>

API

Props

ux-row

Property	Description	Type	Default	Version
customStyle	Custom root element style	UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
gutter	Grid gutter; half of it is applied on each side, in px	number | string	0	-
justify	Horizontal arrangement: start | end | center | around | between	string	'start'	-
align	Vertical arrangement: top | center | bottom	string	'center'	-
stop	Whether to stop event propagation	boolean	true	-

ux-col

Property	Description	Type	Default	Version
customStyle	Custom root element style	UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
span	Number of columns the cell occupies, out of a total of 12	number | string	12	-
offset	Left offset of the cell, computed the same way as span (out of 12)	number | string	0	-
justify	Horizontal arrangement	string	'start'	-
align	Vertical arrangement	string	'center'	-
textAlign	Horizontal text alignment	string	'left'	-
stop	Whether to stop event propagation	boolean	true	-

Events

None of the components on this page emits events.

Slots

ux-row

Slot	Description	Version
default	Place ux-col children here	-

ux-col

Slot	Description	Version
default	Column content	-

Notes

1. ux-col gets its gutter from the parent ux-row via injection; used standalone it is treated as 0.
2. span / offset are based on a 12-part grid: width = span / 12 × 100%, and offset is converted to margin-left on the same scale.
3. ux-row uses flex-wrap: wrap, so columns whose spans add up to more than 12 wrap to the next line.
4. justify of start / end / around / between maps to flex-* / space-* respectively, while center is used as-is; align accepts top / center / bottom.
5. gutter is implemented as half-gutter padding on each side of every column, so the row also leaves gutter / 2 at its leading and trailing edges.