Appearance

Grid 栅格 ​

24 栅格系统。

概述 ​

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

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

Flex 布局 ​

栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。

代码演示 ​

基础栅格 ​

从堆叠到水平排列。

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

col
col-12
col-12
col-8
col-8
col-8
col-6
col-6
col-6
col-6
vue
<template>
  <a-row>
    <a-col :span="24">col</a-col>
  </a-row>
  <a-row>
    <a-col :span="12">col-12</a-col>
    <a-col :span="12">col-12</a-col>
  </a-row>
  <a-row>
    <a-col :span="8">col-8</a-col>
    <a-col :span="8">col-8</a-col>
    <a-col :span="8">col-8</a-col>
  </a-row>
  <a-row>
    <a-col :span="6">col-6</a-col>
    <a-col :span="6">col-6</a-col>
    <a-col :span="6">col-6</a-col>
    <a-col :span="6">col-6</a-col>
  </a-row>
</template>

区块间隔 ​

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

如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。

如果需要垂直间距，可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。

col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
col-6
vue
<template>
  <a-divider orientation="left">Horizontal</a-divider>
  <a-row :gutter="16">
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
  </a-row>
  <a-divider orientation="left">Responsive</a-divider>
  <a-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
  </a-row>
  <a-divider orientation="left">Vertical</a-divider>
  <a-row :gutter="[16, 24]">
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
    <a-col class="gutter-row" :span="6">
      <div class="gutter-box">col-6</div>
    </a-col>
  </a-row>
</template>

<style scoped>
.gutter-box {
  background: #0092ff;
  padding: 8px 0;
}
</style>

左右偏移 ​

列偏移。

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

col-8
col-8
col-6 col-offset-6
col-6 col-offset-6
col-12 col-offset-6
vue
<template>
  <a-row>
    <a-col :span="8">col-8</a-col>
    <a-col :span="8" :offset="8">col-8</a-col>
  </a-row>
  <a-row>
    <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
    <a-col :span="6" :offset="6">col-6 col-offset-6</a-col>
  </a-row>
  <a-row>
    <a-col :span="12" :offset="6">col-12 col-offset-6</a-col>
  </a-row>
</template>

栅格排序 ​

列排序。

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

col-18 col-push-6
col-6 col-pull-18
vue
<template>
  <a-row>
    <a-col :span="18" :push="6">col-18 col-push-6</a-col>
    <a-col :span="6" :pull="18">col-6 col-pull-18</a-col>
  </a-row>
</template>

排序 ​

通过 order 来改变元素的排序。

1 col-order-4
2 col-order-3
3 col-order-2
4 col-order-1
1 col-order-responsive
2 col-order-responsive
3 col-order-responsive
4 col-order-responsive
vue
<template>
  <a-divider orientation="left">Normal</a-divider>
  <a-row>
    <a-col :span="6" :order="4">1 col-order-4</a-col>
    <a-col :span="6" :order="3">2 col-order-3</a-col>
    <a-col :span="6" :order="2">3 col-order-2</a-col>
    <a-col :span="6" :order="1">4 col-order-1</a-col>
  </a-row>
  <a-divider orientation="left">Responsive</a-divider>
  <a-row>
    <a-col :span="6" :xs="{ order: 1 }" :sm="{ order: 2 }" :md="{ order: 3 }" :lg="{ order: 4 }">
      1 col-order-responsive
    </a-col>
    <a-col :span="6" :xs="{ order: 2 }" :sm="{ order: 1 }" :md="{ order: 4 }" :lg="{ order: 3 }">
      2 col-order-responsive
    </a-col>
    <a-col :span="6" :xs="{ order: 3 }" :sm="{ order: 4 }" :md="{ order: 2 }" :lg="{ order: 2 }">
      3 col-order-responsive
    </a-col>
    <a-col :span="6" :xs="{ order: 4 }" :sm="{ order: 3 }" :md="{ order: 1 }" :lg="{ order: 1 }">
      4 col-order-responsive
    </a-col>
  </a-row>
</template>

Flex 填充 ​

Col 提供 flex 属性以支持填充。

2 / 5
3 / 5
100px
auto
1 1 200px
0 1 300px
none
auto with no-wrap
vue
<template>
  <a-divider orientation="left">Percentage columns</a-divider>
  <a-row>
    <a-col :flex="2">2 / 5</a-col>
    <a-col :flex="3">3 / 5</a-col>
  </a-row>
  <a-divider orientation="left">Fill rest</a-divider>
  <a-row>
    <a-col flex="100px">100px</a-col>
    <a-col flex="auto">auto</a-col>
  </a-row>
  <a-divider orientation="left">Raw flex style</a-divider>
  <a-row>
    <a-col flex="1 1 200px">1 1 200px</a-col>
    <a-col flex="0 1 300px">0 1 300px</a-col>
  </a-row>
  <a-row :wrap="false">
    <a-col flex="none">
      <div style="padding: 0 16px">none</div>
    </a-col>
    <a-col flex="auto">auto with no-wrap</a-col>
  </a-row>
</template>

响应式布局 ​

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

Col
Col
Col
vue
<template>
  <a-row>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
    <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">Col</a-col>
    <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">Col</a-col>
  </a-row>
</template>

API ​

Row ​

成员说明类型默认值
align垂直对齐方式top | middle | bottom | stretch | {[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'top' | 'middle' | 'bottom' | 'stretch'}top
gutter栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（1.5.0 后支持）。number | object | array0
justify水平排列方式start | end | center | space-around | space-between | space-evenly | {[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}start
wrap是否自动换行booleanfalse

Col ​

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