# Grid栅格布局

通过基础的 24 分栏,迅速简便地创建布局。

# ✨简单用法

通过 row 和 col 组件嵌套使用,通过col组件span属性控制分栏


<template>
    <div>
        <wb-row>
            <wb-col span="24">
                <div class="grid-content bg-purple"></div>
            </wb-col>
        </wb-row>
        <wb-row>
            <wb-col span="12">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col span="12">
                <div class="grid-content bg-purple-light"></div>
            </wb-col>
        </wb-row>
        <wb-row>
            <wb-col span="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col span="6">
                <div class="grid-content bg-purple-light"></div>
            </wb-col>
            <wb-col span="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col span="6">
                <div class="grid-content bg-purple-light"></div>
            </wb-col>
        </wb-row>
        <wb-row>
            <wb-col span="2">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col span="5">
                <div class="grid-content bg-purple-light"></div>
            </wb-col>
            <wb-col span="17">
                <div class="grid-content bg-purple"></div>
            </wb-col>
        </wb-row>
    </div>
</template>
<style>
    .row {
        margin-bottom: 20px;
    }

    .row:last-child {
        margin-bottom: 0;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #E5E9F2;
    }
</style>
显示代码 复制代码

# ✨分栏偏移

通过 row 和 col 组件嵌套使用,通过col组件offset属性控制左侧偏移量


<template>
    <div>
        <wb-row>
            <wb-col span="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col span="6" offset="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
        </wb-row>
        <wb-row>
            <wb-col span="12" offset="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
        </wb-row>
    </div>
</template>
<style>
    .row {
        margin-bottom: 20px;
    }

    .row:last-child {
        margin-bottom: 0;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .bg-purple {
        background: #d3dce6;
    }
</style>
显示代码 复制代码

# ✨混合布局

通过 row 和 col 组件嵌套使用,通过row组件gutter属性控制col左右间距,实际距离为gutter/2


<template>
    <div>
        <wb-row gutter="20">
            <wb-col span="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col span="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
        </wb-row>
        <wb-row gutter="20">
            <wb-col span="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col span="6" offset="6">
                <div class="grid-content bg-purple"></div>
            </wb-col>
        </wb-row>
        <wb-row :gutter="20">
            <wb-col :span="8">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col :span="8">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col :span="4">
                <div class="grid-content bg-purple"></div>
            </wb-col>
            <wb-col :span="4">
                <div class="grid-content bg-purple"></div>
            </wb-col>
        </wb-row>
    </div>
</template>
<style>
    .row {
        margin-bottom: 20px;
    }

    .row:last-child {
        margin-bottom: 0;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .bg-purple {
        background: #d3dce6;
    }
</style>
显示代码 复制代码

# ✨响应式

预设了五个响应尺寸,xs(默认)\sm\md\lg\xl


<template>
    <div>
        <wb-row gutter="20">
            <wb-col span="8" :sm="{span:'6',offset:'2'}" :md="{span:'4',offset:'2'}" :lg="{span:'3',offset:'2'}" :xl="{span:'1',offset:'2'}"><div class="grid-content bg-purple"></div></wb-col>
            <wb-col span="4" :sm="{span:'6',offset:'2'}" :md="{span:'8',offset:'2'}" :lg="{span:'9',offset:'2'}" :xl="{span:'11',offset:'2'}"><div class="grid-content bg-purple"></div></wb-col>
            <wb-col span="4" :sm="{span:'6',offset:'2'}" :md="{span:'8',offset:'2'}" :lg="{span:'9',offset:'2'}" :xl="{span:'11',offset:'2'}"><div class="grid-content bg-purple"></div></wb-col>
            <wb-col span="8" :sm="{span:'6',offset:'2'}" :md="{span:'4',offset:'2'}" :lg="{span:'3',offset:'2'}" :xl="{span:'1',offset:'2'}"><div class="grid-content bg-purple"></div></wb-col>
        </wb-row>
    </div>
</template>
<style>
    .row {
        margin-bottom: 20px;
    }

    .row:last-child {
        margin-bottom: 0;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .bg-purple {
        background: #d3dce6;
    }
</style>
显示代码 复制代码

# 📌 wb-row Attributes

参数 说明 类型
可选值
默认值
gutter 栅格间隔 number

# 📌 wb-col Attributes

参数 说明 类型
可选值
默认值
span 栅格占据的列数 number 24
offset 栅格左侧的间隔格数 number 0
sm 响应式栅格数≥577px object(例如: {span: 4, offset: 4})
md 响应式栅格数≥769px object(例如: {span: 4, offset: 4})
lg 响应式栅格数≥993px object(例如: {span: 4, offset: 4})
xl 响应式栅格数≥1201px object(例如: {span: 4, offset: 4})