Grid 栅格

24栅格系统。

栅格设计理念

在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。

划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

示例

示例。

  1. <template>
  2.     <div class="grid-demo">
  3.         <div class="overview">
  4.             <v-row class="demo-row">
  5.                 <v-col class="demo-col demo-col-1" span="24">
  6.                     100%
  7.                 </v-col>
  8.             </v-row>
  9.             <v-row class="demo-row">
  10.                 <v-col class="demo-col demo-col-2" span="6">25%</v-col>
  11.                 <v-col class="demo-col demo-col-3" span="6">25%</v-col>
  12.                 <v-col class="demo-col demo-col-2" span="6">25%</v-col>
  13.                 <v-col class="demo-col demo-col-3" span="6">25%</v-col>
  14.             </v-row>
  15.             <v-row class="demo-row">
  16.                 <v-col class="demo-col demo-col-4" span="8">33.33%</v-col>
  17.                 <v-col class="demo-col demo-col-5" span="8">33.33%</v-col>
  18.                 <v-col class="demo-col demo-col-4" span="8">33.33%</v-col>
  19.             </v-row>
  20.             <v-row class="demo-row">
  21.                 <v-col class="demo-col demo-col-1" span="12">50%</v-col>
  22.                 <v-col class="demo-col demo-col-3" span="12">50%</v-col>
  23.             </v-row>
  24.             <v-row class="demo-row">
  25.                 <v-col class="demo-col demo-col-4" span="16">66.66%</v-col>
  26.                 <v-col class="demo-col demo-col-5" span="8">33.33%</v-col>
  27.             </v-row>
  28.         </div>
  29.     </div>
  30. </template>

概述

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：

  • 通过row在水平方向建立一组column（简写col）
  • 你的内容应当放置于col内，并且，只有col可以作为row的直接元素
  • 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8来创建
  • 如果一个row中的col总和超过 24，那么多余的col会作为一个整体另起一行排列

Flex 布局

我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。

Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。

代码演示

基本栅格

从堆叠到水平排列。使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。

  1. <template>
  2.     <div class="grid-demo">
  3.         <v-row>
  4.             <v-col span="24">col-24</v-col>
  5.         </v-row>
  6.         <v-row>
  7.             <v-col span="6">col-6</v-col>
  8.             <v-col span="6">col-6</v-col>
  9.             <v-col span="6">col-6</v-col>
  10.             <v-col span="6">col-6</v-col>
  11.         </v-row>
  12.         <v-row>
  13.             <v-col span="8">col-8</v-col>
  14.             <v-col span="8">col-8</v-col>
  15.             <v-col span="8">col-8</v-col>
  16.         </v-row>
  17.         <v-row>
  18.             <v-col span="12">col-12</v-col>
  19.             <v-col span="12">col-12</v-col>
  20.         </v-row>
  22.         <v-row class="demo-row">
  23.             <v-col span="16">col-16</v-col>
  24.             <v-col span="8">col-8</v-col>
  25.         </v-row>
  26.     </div>
  27. </template>

区块间隔

栅格常常需要和间隔进行配合，你可以使用 Row 的 gutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔。

  1. <template>
  2.     <div class="grid-demo">
  3.         <v-row :gutter="16">
  4.             <v-col class="gutter-row" span="6">
  5.                 <div class="gutter-box">col-6</div>
  6.             </v-col>
  7.             <v-col class="gutter-row" span="6">
  8.                 <div class="gutter-box">col-6</div>
  9.             </v-col>
  10.             <v-col class="gutter-row" span="6">
  11.                 <div class="gutter-box">col-6</div>
  12.             </v-col>
  13.             <v-col class="gutter-row" span="6">
  14.                 <div class="gutter-box">col-6</div>
  15.             </v-col>
  16.         </v-row>
  17.     </div>
  18. </template>
  20. <style>
  21.     .grid-demo .gutter-example .ant-row > div {
  22.         background: transparent;
  23.         border: 0;
  24.     }
  26.     .grid-demo .gutter-box {
  27.         background: #00A0E9;
  28.         padding: 5px 0;
  29.     }
  30. </style>

左右偏移

使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度。

  1. <template>
  2.     <div class="grid-demo">
  3.         <v-row>
  4.             <v-col span="8">col-8</v-col>
  5.             <v-col span="8" offset="8">col-8</v-col>
  6.         </v-row>
  7.         <v-row>
  8.             <v-col span="6" offset="6">col-6 col-offset-6</v-col>
  9.             <v-col span="6" offset="6">col-6 col-offset-6</v-col>
  10.         </v-row>
  11.         <v-row>
  12.             <v-col span="12" offset="6">col-12 col-offset-6</v-col>
  13.         </v-row>
  14.     </div>
  15. </template>

格栅排序

列排序。通过使用 push 和 pull 类就可以很容易的改变列（column）的顺序。

  1. <template>
  2.     <div class="grid-demo">
  3.         <v-row>
  4.             <v-col span="18" push="6">col-18 col-push-6</v-col>
  5.             <v-col span="6" pull="18">col-6 col-pull-18</v-col>
  6.         </v-row>
  7.     </div>
  8. </template>

Flex 布局

Flex 布局基础。使用 row-flex 定义 flex 布局，其子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。

  1. <template>
  2.     <div class="grid-demo">
  3.         <p>sub-element align left</p>
  4.         <v-row type="flex" justify="start">
  5.             <v-col span="4">col-4</v-col>
  6.             <v-col span="4">col-4</v-col>
  7.             <v-col span="4">col-4</v-col>
  8.             <v-col span="4">col-4</v-col>
  9.         </v-row>
  10.         <p>sub-element align center</p>
  11.         <v-row type="flex" justify="center">
  12.             <v-col span="4">col-4</v-col>
  13.             <v-col span="4">col-4</v-col>
  14.             <v-col span="4">col-4</v-col>
  15.             <v-col span="4">col-4</v-col>
  16.         </v-row>
  17.         <p>sub-element align right</p>
  18.         <v-row type="flex" justify="end">
  19.             <v-col span="4">col-4</v-col>
  20.             <v-col span="4">col-4</v-col>
  21.             <v-col span="4">col-4</v-col>
  22.             <v-col span="4">col-4</v-col>
  23.         </v-row>
  24.         <p>sub-element monospaced arrangement</p>
  25.         <v-row type="flex" justify="space-between">
  26.             <v-col span="4">col-4</v-col>
  27.             <v-col span="4">col-4</v-col>
  28.             <v-col span="4">col-4</v-col>
  29.             <v-col span="4">col-4</v-col>
  30.         </v-row>
  31.         <p>sub-element align full</p>
  32.         <v-row type="flex" justify="space-around">
  33.             <v-col span="4">col-4</v-col>
  34.             <v-col span="4">col-4</v-col>
  35.             <v-col span="4">col-4</v-col>
  36.             <v-col span="4">col-4</v-col>
  37.         </v-row>
  38.     </div>
  39. </template>

Flex 对齐

Flex 子元素垂直对齐。

  1. <template>
  2.     <div class="grid-demo">
  3.         <p>Align Top</p>
  4.         <v-row type="flex" justify="center" align="top">
  5.             <v-col span="4"><p class="height-100">col-4</p></v-col>
  6.             <v-col span="4"><p class="height-50">col-4</p></v-col>
  7.             <v-col span="4"><p class="height-120">col-4</p></v-col>
  8.             <v-col span="4"><p class="height-80">col-4</p></v-col>
  9.         </v-row>
  10.         <p>Align Center</p>
  11.         <v-row type="flex" justify="space-around" align="middle">
  12.             <v-col span="4"><p class="height-100">col-4</p></v-col>
  13.             <v-col span="4"><p class="height-50">col-4</p></v-col>
  14.             <v-col span="4"><p class="height-120">col-4</p></v-col>
  15.             <v-col span="4"><p class="height-80">col-4</p></v-col>
  16.         </v-row>
  17.         <p>Align Bottom</p>
  18.         <v-row type="flex" justify="space-between" align="bottom">
  19.             <v-col span="4"><p class="height-100">col-4</p></v-col>
  20.             <v-col span="4"><p class="height-50">col-4</p></v-col>
  21.             <v-col span="4"><p class="height-120">col-4</p></v-col>
  22.             <v-col span="4"><p class="height-80">col-4</p></v-col>
  23.         </v-row>
  24.         <p>Dynamically Align To {{ '"' + align + '"' }}</p>
  25.         <p><v-button type="primary" @click="alignChange">改变Align</v-button></p>
  26.         <v-row type="flex" justify="space-between" :align="align">
  27.             <v-col span="4"><p class="height-100">col-4</p></v-col>
  28.             <v-col span="4"><p class="height-50">col-4</p></v-col>
  29.             <v-col span="4"><p class="height-120">col-4</p></v-col>
  30.             <v-col span="4"><p class="height-80">col-4</p></v-col>
  31.         </v-row>
  32.     </div>
  33. </template>
  35. <script>
  36.     export default {
  37.         data: function() {
  38.             return {
  39.                 align: "top",
  40.                 index: 0,
  41.                 alignChoose: ["top", "middle", "bottom"]
  42.             }
  43.         },
  44.         methods: {
  45.             alignChange() {
  46.                 this.index = (this.index + 1) % 3;
  47.                 this.align = this.alignChoose[this.index];
  48.             }
  49.         }
  50.     }
  51. </script>

Flex 排序

通过 Flex 布局的 Order 来改变元素的排序。

  1. <template>
  2.     <div class="grid-demo">
  3.         <p>Align Top</p>
  4.         <v-row type="flex">
  5.             <v-col span="6" order="4">1 col-order-4</v-col>
  6.             <v-col span="6" order="3">2 col-order-3</v-col>
  7.             <v-col span="6" order="2">3 col-order-2</v-col>
  8.             <v-col span="6" order="1">4 col-order-1</v-col>
  9.         </v-row>
  10.     </div>
  11. </template>

响应式布局

参照 Bootstrap 的 响应式设计，预设四个响应尺寸：xs sm md lg。

  1. <template>
  2.     <div class="grid-demo">
  3.         <v-row type="flex">
  4.             <v-col :xs="2" :sm="4" :md="6" :lg="8">col</v-col>
  5.             <v-col :xs="20" :sm="16" :md="12" :lg="8">col</v-col>
  6.             <v-col :xs="2" :sm="4" :md="6" :lg="8">col</v-col>
  7.         </v-row>
  8.     </div>
  9. </template>

其他属性的响应式

span pull push offset order 属性可以通过内嵌到 xs sm md lg 属性中来使用。其中 :xs="6" 相当于 :xs="{ span: 6 }"。

  1. <template>
  2.     <div class="grid-demo">
  3.         <v-row type="flex">
  4.             <v-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">col</v-col>
  5.             <v-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">col</v-col>
  6.             <v-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">col</v-col>
  7.         </v-row>
  8.         <v-row type="flex">
  9.             <v-col :xs="{ span: 6, order: 1 }" :lg="{ span: 8, order: 3 }">col-1</v-col>
  10.             <v-col :xs="{ span: 12, order: 2 }" :lg="{ span: 8, order: 2 }">col-2</v-col>
  11.             <v-col :xs="{ span: 6, order: 3 }" :lg="{ span: 8, order: 1 }">col-3</v-col>
  12.         </v-row>
  13.     </div>
  14. </template>

格栅配置器

可以简单配置几种等分栅格和间距。

  1. <template>
  2.     <div class="grid-demo">
  3.         Gutter: <v-select size="lg" style="width: 200px;" :data="gutterOptions" v-model="gutter" @change="gutterChange"></v-select>
  4.         Column Count: <v-select size="lg" style="width: 200px;" :data="colCountOptions" v-model="colCount" @change="colCountChange"></v-select>
  5.         <v-row :gutter="gutter">
  6.             <v-col v-for="n in colCount" :span="24/colCount" :key="n" class="gutter-row" >
  7.                 <div class="gutter-box">Column</div>
  8.             </v-col>
  9.         </v-row>
  10.     </div>
  11.     <div><pre>{{ renderCode }}</pre></div>
  12. </template>
  14. <script>
  15.     export default {
  16.         data: function() {
  17.             return {
  18.                 gutter: 0,
  19.                 colCount: 2,
  20.                 renderCode: '<v-row>\n' +
  21.                             '    <v-col span="12"></v-col>\n' +
  22.                             '    <v-col span="12"></v-col>\n' +
  23.                             '</v-row>',
  24.                 gutterOptions: [
  25.                     {label: '0px', value: 0},
  26.                     {label: '8px', value: 8},
  27.                     {label: '16px', value: 16},
  28.                     {label: '24px', value: 24},
  29.                     {label: '32px', value: 32},
  30.                     {label: '40px', value: 40},
  31.                     {label: '48px', value: 48}
  32.                 ],
  33.                 colCountOptions: [
  34.                     {label: '2', value: 2},
  35.                     {label: '3', value: 3},
  36.                     {label: '4', value: 4},
  37.                     {label: '6', value: 6},
  38.                     {label: '8', value: 8},
  39.                     {label: '12', value: 12}
  40.                 ],
  41.             }
  42.         },
  43.         methods: {
  44.             gutterChange(value) {
  45.                 this.refreshCode(value, this.colCount);
  46.             },
  47.             colCountChange(value) {
  48.                 this.refreshCode(this.gutter, value);
  49.             },
  50.             refreshCode(gutter, colCount) {
  51.                 this.renderCode = '';
  52.                 let gutterStr = "";
  53.                 if (gutter) gutterStr = ' gutter="' + gutter + '"';
  54.                 this.renderCode += '<v-row' + gutterStr + '>\n';
  55.                 for (let n = 0; n < colCount; n++) {
  56.                     this.renderCode += '    <v-col span="' + (24 / colCount) + '"></v-col>\n';
  57.                 }
  58.                 this.renderCode += '</v-row>';
  59.             }
  60.         }
  61.     }
  62. </script>

API

Row Props

属性说明类型默认值
gutter栅格间隔Number0
type布局模式，可选flex，现代浏览器下有效String-
alignflex 布局下的垂直对齐方式：top middle bottomString-
justifyflex 布局下的水平排列方式：start end center space-around space-betweenStringstart

Col Props

属性说明类型默认值
span栅格占位格数，为 0 时相当于 display: noneNumber-
order栅格顺序，flex 布局模式下有效Number0
offset栅格左侧的间隔格数，间隔内不可以有栅格Number0
push栅格向右移动格数Number0
pull栅格向左移动格数Number0
xs<768px 响应式栅格，可为栅格数或一个包含其他属性的对象Number|Object-
sm≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象Number|Object-
md≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象Number|Object-
lg≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象Number|Object-