# Layout 布局
参考 bootstrap 提供了栅格布局, 并根据设计规则封装了基础布局组件, 协助开发者快速完成页面布局。
通过基础的 24 分栏，迅速简便地创建布局。
# 属性对比（只显示有差异的）
| Row 参数 | WinDesign | Element-ui |
|---|---|---|
| align | 默认值： top | 默认值： - |
# 代码演示
基础布局
使用单一分栏创建基础的栅格布局。
查看代码
<template>
<w-row>
<w-col :span="24">
<div class="grid-content bg-purple-dark"></div></w-col>
</w-row>
<w-row>
<w-col :span="12">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="12">
<div class="grid-content bg-purple-light"></div></w-col>
</w-row>
<w-row>
<w-col :span="8">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="8">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="8">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
<w-row>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple-light"></div></w-col>
</w-row>
<w-row>
<w-col :span="4">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple-light"></div></w-col>
</w-row>
</template>分栏间隔
分栏之间存在间隔, 可以使用gutter来设置。
查看代码
<template>
<w-row :gutter="20">
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
</template>混合布局
通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。
查看代码
<template>
<w-row :gutter="20">
<w-col :span="16">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="8">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
<w-row :gutter="20">
<w-col :span="8">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="8">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
<w-row :gutter="20">
<w-col :span="4">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="16">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="4">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
</template>分栏偏移
支持偏移指定的栏数, 可以通过offset属性来设置。
查看代码
<template>
<w-row :gutter="20">
<w-col :span="6">
<div class="grid-content bg-purple"></div>
</w-col>
<w-col :span="6" :offset="6">
<div class="grid-content bg-purple"></div>
</w-col>
</w-row>
<w-row :gutter="20">
<w-col :span="6" :offset="6">
<div class="grid-content bg-purple"></div>
</w-col>
<w-col :span="6" :offset="6">
<div class="grid-content bg-purple"></div>
</w-col>
</w-row>
<w-row :gutter="20">
<w-col :span="12" :offset="6">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
</template>对齐方式
通过 flex 布局来对分栏进行灵活的对齐。
查看代码
<template>
<w-row type="flex" class="row-bg">
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
<w-row type="flex" class="row-bg" justify="center">
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
<w-row type="flex" class="row-bg" justify="end">
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
<w-row type="flex" class="row-bg" justify="space-between">
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
<w-row type="flex" class="row-bg" justify="space-around">
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple-light"></div></w-col>
<w-col :span="6">
<div class="grid-content bg-purple"></div></w-col>
</w-row>
</template>响应式布局
参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
查看代码
<template>
<w-row :gutter="10">
<w-col :xs="8" :sm="6" :md="4" :lg="3"
:xl="1"><div class="grid-content bg-purple"></div></w-col>
<w-col :xs="4" :sm="6" :md="8" :lg="9"
:xl="11"><div class="grid-content bg-purple-light"></div></w-col>
<w-col :xs="4" :sm="6" :md="8" :lg="9"
:xl="11"><div class="grid-content bg-purple"></div></w-col>
<w-col :xs="8" :sm="6" :md="4" :lg="3"
:xl="1"><div class="grid-content bg-purple-light"></div></w-col>
</w-row>
</template># API
# Row Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| align | flex 布局下的垂直排列方式 | String | 'top' | 'middle' | 'bottom' | 'top' | |
| gutter | 栅格间隔 | Number | — | 0 | |
| justify | flex 布局下的水平排列方式 | String | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'start' | |
| type | 布局模式，可选 flex，现代浏览器下有效 | String | — | — | |
| tag | 自定义元素标签 | String | — | div |
# Col Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| offset | 栅格左侧的间隔格数 | Number | — | 0 | |
| push | 栅格向右移动格数 | Number | — | 0 | |
| pull | 栅格向左移动格数 | Number | — | 0 | |
| span | 栅格占据的列数 | Number | — | 24 | |
| tag | 自定义元素标签 | String | * | div | |
| xs | <768px 响应式栅格数或者栅格属性对象 | Number | Object (eg： {span: 4, offset: 4}) | — | — | |
| sm | ≥768px 响应式栅格数或者栅格属性对象 | Number | Object (eg: {span: 4, offset: 4}) | — | — | |
| md | ≥992px 响应式栅格数或者栅格属性对象 | Number | Object (eg: {span: 4, offset: 4}) | — | — | |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 | Number | Object (eg: {span: 4, offset: 4}) | — | — | |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 | Number | Object (eg： {span: 4, offset: 4}) | — | — |