Grid 栅格布局

24 栅格响应式布局，基于行（Row）和列（Col）来规划 DOM 区块，完成快速布局。

基本布局

一个Row组件可以包裹1 ~ N个Col组件，通过给Col组件配置span属性可以快速完成栅格布局。

col-12

col-8

col-6

展开查看代码

vue

<template>
    <section>
        <j-row>
            <j-col :span="12">col-12</j-col>
            <j-col :span="12">col-12</j-col>
        </j-row>
        <j-row>
            <j-col :span="8">col-8</j-col>
            <j-col :span="8">col-8</j-col>
            <j-col :span="8">col-8</j-col>
        </j-row>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

<template>
    <section>
        <j-row>
            <j-col :span="12">col-12</j-col>
            <j-col :span="12">col-12</j-col>
        </j-row>
        <j-row>
            <j-col :span="8">col-8</j-col>
            <j-col :span="8">col-8</j-col>
            <j-col :span="8">col-8</j-col>
        </j-row>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

栅格间距

栅格之间的间距可以通过gutter属性控制。

col-12

col-8

col-6

展开查看代码

vue

<template>
    <section>
        <j-row :gutter="20">
            <j-col :span="12"><div class="cell">col-12</div></j-col>
            <j-col :span="12"><div class="cell">col-12</div></j-col>
        </j-row>
        <j-row :gutter="12">
            <j-col :span="8"><div class="cell">col-8</div></j-col>
            <j-col :span="8"><div class="cell">col-8</div></j-col>
            <j-col :span="8"><div class="cell">col-8</div></j-col>
        </j-row>
        <j-row :gutter="8">
            <j-col :span="6"><div class="cell">col-6</div></j-col>
            <j-col :span="6"><div class="cell">col-6</div></j-col>
            <j-col :span="6"><div class="cell">col-6</div></j-col>
            <j-col :span="6"><div class="cell">col-6</div></j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        .cell {
            background-color: @primary-5;
        }
    }

    &:nth-child(2n + 2) {
        .cell {
            background-color: @primary-4;
        }
    }
}
</style>

<template>
    <section>
        <j-row :gutter="20">
            <j-col :span="12"><div class="cell">col-12</div></j-col>
            <j-col :span="12"><div class="cell">col-12</div></j-col>
        </j-row>
        <j-row :gutter="12">
            <j-col :span="8"><div class="cell">col-8</div></j-col>
            <j-col :span="8"><div class="cell">col-8</div></j-col>
            <j-col :span="8"><div class="cell">col-8</div></j-col>
        </j-row>
        <j-row :gutter="8">
            <j-col :span="6"><div class="cell">col-6</div></j-col>
            <j-col :span="6"><div class="cell">col-6</div></j-col>
            <j-col :span="6"><div class="cell">col-6</div></j-col>
            <j-col :span="6"><div class="cell">col-6</div></j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        .cell {
            background-color: @primary-5;
        }
    }

    &:nth-child(2n + 2) {
        .cell {
            background-color: @primary-4;
        }
    }
}
</style>

对齐方式

通过justify控制水平方向的对齐方式。
通过align控制垂直方向的对齐方式。

justify为flex-start时，代表水平方向的靠左对齐，其余情况也可参考 flex 布局的实现方式。

col-4

align为flex-start时，代表垂直方向的靠上对齐，其余情况也可参考 flex 布局的实现方式。

col-4

展开查看代码

vue

<template>
    <section>
        <p><code>justify</code>为<code>flex-start</code>时，代表水平方向的靠左对齐，其余情况也可参考 flex 布局的实现方式。</p>
        <j-row justify="flex-start">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="center">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="flex-end">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="space-between">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="space-around">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>

        <p><code>align</code>为<code>flex-start</code>时，代表垂直方向的靠上对齐，其余情况也可参考 flex 布局的实现方式。</p>
        <j-row align="flex-start">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 80px">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 120px">col-4</div></j-col>
        </j-row>
        <j-row align="center">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 80px">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 120px">col-4</div></j-col>
        </j-row>
        <j-row align="flex-end">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 80px">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 120px">col-4</div></j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    margin-top: 20px;

    .cell {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
    }

    &:nth-child(2n + 1) {
        .cell {
            background-color: @primary-5;
        }
    }

    &:nth-child(2n + 2) {
        .cell {
            background-color: @primary-4;
        }
    }
}
</style>

<template>
    <section>
        <p><code>justify</code>为<code>flex-start</code>时，代表水平方向的靠左对齐，其余情况也可参考 flex 布局的实现方式。</p>
        <j-row justify="flex-start">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="center">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="flex-end">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="space-between">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>
        <j-row justify="space-around">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell">col-4</div></j-col>
        </j-row>

        <p><code>align</code>为<code>flex-start</code>时，代表垂直方向的靠上对齐，其余情况也可参考 flex 布局的实现方式。</p>
        <j-row align="flex-start">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 80px">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 120px">col-4</div></j-col>
        </j-row>
        <j-row align="center">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 80px">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 120px">col-4</div></j-col>
        </j-row>
        <j-row align="flex-end">
            <j-col :span="4"><div class="cell">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 80px">col-4</div></j-col>
            <j-col :span="4"><div class="cell" style="height: 120px">col-4</div></j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    margin-top: 20px;

    .cell {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
    }

    &:nth-child(2n + 1) {
        .cell {
            background-color: @primary-5;
        }
    }

    &:nth-child(2n + 2) {
        .cell {
            background-color: @primary-4;
        }
    }
}
</style>

换行控制

是否自动换行可以通过wrap属性控制，默认开启。

自动换行：

col-6

关闭自动换行，通常会带来溢出问题，需要酌情设置：

col-6

展开查看代码

vue

<template>
    <section>
        <p>自动换行：</p>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
        </j-row>

        <p>关闭自动换行，通常会带来溢出问题，需要酌情设置：</p>
        <j-row :wrap="false">
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

<template>
    <section>
        <p>自动换行：</p>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
        </j-row>

        <p>关闭自动换行，通常会带来溢出问题，需要酌情设置：</p>
        <j-row :wrap="false">
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
            <j-col :span="6">col-6</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

栅格偏移

通过offset属性控制格子向右偏移。

col-6

col-4

col-6

col-8

col-4

展开查看代码

vue

<template>
    <section>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="4" :offset="2">col-4</j-col>
        </j-row>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="8" :offset="4">col-8</j-col>
        </j-row>
        <j-row>
            <j-col :span="4" :offset="2">col-4</j-col>
            <j-col :span="4" :offset="1">col-4</j-col>
            <j-col :span="4" :offset="2">col-4</j-col>
            <j-col :span="4" :offset="1">col-4</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

<template>
    <section>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="4" :offset="2">col-4</j-col>
        </j-row>
        <j-row>
            <j-col :span="6">col-6</j-col>
            <j-col :span="8" :offset="4">col-8</j-col>
        </j-row>
        <j-row>
            <j-col :span="4" :offset="2">col-4</j-col>
            <j-col :span="4" :offset="1">col-4</j-col>
            <j-col :span="4" :offset="2">col-4</j-col>
            <j-col :span="4" :offset="1">col-4</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

格子推拉

通过push或pull属性控制格子位置的推拉。顾名思义，push是把格子往右推，pull则是把各自往左拉。不同于offset，push和pull不会影响其他格子的位置。

适当地操作推拉，其实可以用作格子排序。

No=1,Push=12

No=2,Pull=12

No=1,Push=6

No=2,Pull=8

No=3,Push=2

展开查看代码

vue

<template>
    <section>
        <j-row>
            <j-col :span="12" :push="12">No=1,Push=12</j-col>
            <j-col :span="12" :pull="12">No=2,Pull=12</j-col>
        </j-row>
        <j-row>
            <j-col :span="8" :push="6">No=1,Push=6</j-col>
            <j-col :span="6" :pull="8">No=2,Pull=8</j-col>
            <j-col :span="6" :push="2">No=3,Push=2</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

<template>
    <section>
        <j-row>
            <j-col :span="12" :push="12">No=1,Push=12</j-col>
            <j-col :span="12" :pull="12">No=2,Pull=12</j-col>
        </j-row>
        <j-row>
            <j-col :span="8" :push="6">No=1,Push=6</j-col>
            <j-col :span="6" :pull="8">No=2,Pull=8</j-col>
            <j-col :span="6" :push="2">No=3,Push=2</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

格子排序

通过order字段进行排序，order从小到大对应start到end。

No=1

No=2

No=3

No=4

展开查看代码

vue

<template>
    <section>
        <j-row>
            <j-col :span="6" :order="3">No=1</j-col>
            <j-col :span="6" :order="4">No=2</j-col>
            <j-col :span="6" :order="1">No=3</j-col>
            <j-col :span="6" :order="2">No=4</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

<template>
    <section>
        <j-row>
            <j-col :span="6" :order="3">No=1</j-col>
            <j-col :span="6" :order="4">No=2</j-col>
            <j-col :span="6" :order="1">No=3</j-col>
            <j-col :span="6" :order="2">No=4</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

响应式布局

使用媒体查询完成响应式布局，我们参照 Bootstrap 的响应式设计，提供了xs, sm, md, lg, xl, xxl等 6 个断点。

xs等属性不仅可以直接使用数值控制span，也支持通过对象控制offset等其他属性，基本可以满足日常开发诉求。

展开查看代码

vue

<template>
    <section>
        <j-row>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">1</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">2</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">3</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">4</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">5</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">6</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">7</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">8</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

<template>
    <section>
        <j-row>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">1</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">2</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">3</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">4</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">5</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">6</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">7</j-col>
            <j-col :xs="24" :sm="12" :md="6" :lg="4" :xl="3">8</j-col>
        </j-row>
    </section>
</template>

<style lang="less" scoped>
.j-col {
    color: #fff;
    height: 50px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

    &:nth-child(2n + 1) {
        background-color: @primary-5;
    }

    &:nth-child(2n + 2) {
        background-color: @primary-4;
    }
}
</style>

Row 属性

参数	说明	类型	默认值	必填
gutter	栅格间隔	`number` \| `{ lg: number; md: number; sm: number; xl: number; xs: number; xxl: number }`	`0`	否
align	垂直对齐方式，参考`flex`布局的`align-items`	`AlignItems`	`'flex-start'`	否
justify	水平对齐方式，参考`flex`布局的`justify-content`	`JustifyContent`	`'flex-start'`	否
wrap	是否自动换行，支持布尔值或者字符串，字符串值参考`flex`布局的`flex-wrap`	`boolean` \| `FlexWrap`	`true`	否

Col 属性

参数	说明	类型	默认值	必填
span	栅格格数，为`0`时相当于`display: none`	`number`	无	否
offset	栅格左侧偏移格数	`number`	`0`	否
order	`flex`布局排序序号，从小到大对应从左到右	`number`	无	否
push	格子往后推，对应`left`属性控制，不会影响其他格子	`number`	无	否
pull	格子往前拉，对应`right`属性控制，不会影响其他格子	`number`	无	否
xs	屏幕宽度`< 576px`的响应式配置，值可以是栅格数或一个包含其他属性（如`span`, `offset`等）的对象	`number` \| `{ offset: number; order: number; pull: number; push: number; span: number }`	无	否
sm	屏幕宽度`>= 576px`的响应式配置，值可以是栅格数或一个包含其他属性的对象	`number` \| `{ offset: number; order: number; pull: number; push: number; span: number }`	无	否
md	屏幕宽度`>= 768px`的响应式配置，值可以是栅格数或一个包含其他属性的对象	`number` \| `{ offset: number; order: number; pull: number; push: number; span: number }`	无	否
lg	屏幕宽度`>= 992px`的响应式配置，值可以是栅格数或一个包含其他属性的对象	`number` \| `{ offset: number; order: number; pull: number; push: number; span: number }`	无	否
xl	屏幕宽度`>= 1200px`的响应式配置，值可以是栅格数或一个包含其他属性的对象	`number` \| `{ offset: number; order: number; pull: number; push: number; span: number }`	无	否
xxl	屏幕宽度`>= 1600px`的响应式配置，值可以是栅格数或一个包含其他属性的对象	`number` \| `{ offset: number; order: number; pull: number; push: number; span: number }`	无	否

基本布局 ​

栅格间距 ​

对齐方式 ​

换行控制 ​

栅格偏移 ​

格子推拉 ​

格子排序 ​

响应式布局 ​

Row 属性 ​

Col 属性 ​

基本布局

栅格间距

对齐方式

换行控制

栅格偏移

格子推拉

格子排序

响应式布局

Row 属性

Col 属性