Grid 栅格

24 栅格系统。

设计理念

在多数业务情况下，Ant Design Vue 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

概述

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

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

Flex 布局

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

代码演示

col-12

col-8

col-6

基础栅格

从堆叠到水平排列。

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

                                <template>
  <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>

                            

Align Top

col-4

Align Center

col-4

Align Bottom

col-4

对齐

子元素垂直对齐。

                                <template>
  <p>Align Top</p>
  <a-row type="flex" justify="center" align="top">
    <a-col :span="4">
      <p class="height-100">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-50">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-120">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-80">col-4</p>
    </a-col>
  </a-row>

  <p>Align Center</p>
  <a-row type="flex" justify="space-around" align="middle">
    <a-col :span="4">
      <p class="height-100">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-50">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-120">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-80">col-4</p>
    </a-col>
  </a-row>

  <p>Align Bottom</p>
  <a-row type="flex" justify="space-between" align="bottom">
    <a-col :span="4">
      <p class="height-100">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-50">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-120">col-4</p>
    </a-col>
    <a-col :span="4">
      <p class="height-80">col-4</p>
    </a-col>
  </a-row>
</template>

                            

Normal

1 col-order-4

2 col-order-3

3 col-order-2

4 col-order-1

Responsive

1 col-order-responsive

2 col-order-responsive

3 col-order-responsive

4 col-order-responsive

排序

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

                                <template>
  <a-divider orientation="left">Normal</a-divider>
  <a-row type="flex">
    <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 type="flex">
    <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>

                            

Percentage columns

2 / 5

3 / 5

Fill rest

100px

auto

Raw flex style

1 1 200px

0 1 300px

Flex 填充

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

                                <template>
  <a-divider orientation="left">Percentage columns</a-divider>
  <a-row type="flex">
    <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 type="flex">
    <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 type="flex">
    <a-col flex="1 1 200px">1 1 200px</a-col>
    <a-col flex="0 1 300px">0 1 300px</a-col>
  </a-row>
</template>

                            

sub-element align left

col-4

sub-element align center

col-4

sub-element align right

col-4

sub-element monospaced arrangement

col-4

sub-element align full

col-4

排版

布局基础。

子元素根据不同的值 start,center,end,space-between,space-around，分别定义其在父节点里面的排版方式。

                                <template>
  <div id="components-grid-demo-flex">
    <p>sub-element align left</p>
    <a-row type="flex" justify="start">
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
    </a-row>
    <p>sub-element align center</p>
    <a-row type="flex" justify="center">
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
    </a-row>

    <p>sub-element align right</p>
    <a-row type="flex" justify="end">
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
    </a-row>

    <p>sub-element monospaced arrangement</p>
    <a-row type="flex" justify="space-between">
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
    </a-row>

    <p>sub-element align full</p>
    <a-row type="flex" justify="space-around">
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
      <a-col :span="4">col-4</a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
#components-grid-demo-flex :deep(.ant-row) {
  background: rgba(128, 128, 128, 0.08);
}
</style>

                            

col-6

区块间隔

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

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

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

数组形式垂直间距在 1.5.0 之后支持。

                                <template>
  <div class="gutter-example">
    <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>
  </div>
</template>

<style scoped>
.gutter-example :deep(.ant-row > div) {
  background: transparent;
  border: 0;
}
.gutter-box {
  background: #00a0e9;
  padding: 5px 0;
}
</style>

                            

col-8

col-6 col-offset-6

col-12 col-offset-6

左右偏移

列偏移。

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

                                <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>

                            

Col

其他属性的响应式

span pull push offset order 属性可以通过内嵌到 xs sm md lg xl xxl 属性中来使用。

其中 :xs="6" 相当于 :xs="{ span: 6 }"。

                                <template>
  <a-row>
    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
    <a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
    <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">Col</a-col>
  </a-row>
</template>

                            

Col

响应式布局

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

                                <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>

                            

col-18 col-push-6

col-6 col-pull-18

栅格排序

列排序。

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

                                <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>

                            

Horizontal Gutter (px):

816 24324048

Vertical Gutter (px):

816 24324048

Column Count:

23 46812

Column

<a-row :gutter="[16,16]">
  <a-col :span="6"/>
  <a-col :span="6"/>
  <a-col :span="6"/>
  <a-col :span="6"/>
</a-row>

<a-row :gutter="[16,16]">
  <a-col :span="6"/>
  <a-col :span="6"/>
  <a-col :span="6"/>
  <a-col :span="6"/>
</a-row>

栅格配置器

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

                                <template>
  <div id="components-grid-demo-playground">
    <div style="margin-bottom: 16px">
      <span style="margin-right: 6px">Horizontal Gutter (px):</span>
      <div style="width: 50%">
        <a-slider
          v-model:value="gutterKey"
          :min="0"
          :max="Object.keys(gutters).length - 1"
          :marks="gutters"
          :step="null"
        />
      </div>
      <span style="margin-right: 6px">Vertical Gutter (px):</span>
      <div style="width: 50%">
        <a-slider
          v-model:value="vgutterKey"
          :min="0"
          :max="Object.keys(vgutters).length - 1"
          :marks="vgutters"
          :step="null"
        />
      </div>
      <span style="margin-right: 6px">Column Count:</span>
      <div style="width: 50%">
        <a-slider
          v-model:value="colCountKey"
          :min="0"
          :max="Object.keys(colCounts).length - 1"
          :marks="colCounts"
          :step="null"
        />
      </div>
    </div>
    <a-row :gutter="[gutters[gutterKey], vgutters[vgutterKey]]">
      <a-col
        v-for="item in colCounts[colCountKey]"
        :key="item.toString()"
        :span="24 / colCounts[colCountKey]"
      >
        <div>Column</div>
      </a-col>
      <a-col
        v-for="item in colCounts[colCountKey]"
        :key="item.toString()"
        :span="24 / colCounts[colCountKey]"
      >
        <div>Column</div>
      </a-col>
    </a-row>
    <pre
      >{{ rowColHtml }}
    </pre>
    <pre
      >{{ rowColHtml }}
    </pre>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
  setup() {
    const state = reactive<{
      gutterKey: number;
      vgutterKey: number;
      colCountKey: number;
      gutters: { [key: number]: number };
      colCounts: { [key: number]: number };
      vgutters: { [key: number]: number };
    }>({
      gutterKey: 1,
      vgutterKey: 1,
      colCountKey: 2,
      gutters: {},
      colCounts: {},
      vgutters: {},
    });
    [8, 16, 24, 32, 40, 48].forEach((value: number, i: number) => {
      state.gutters[i] = value;
    });
    [8, 16, 24, 32, 40, 48].forEach((value, i) => {
      state.vgutters[i] = value;
    });
    [2, 3, 4, 6, 8, 12].forEach((value, i) => {
      state.colCounts[i] = value;
    });
    const rowColHtml = computed(() => {
      const colCount = state.colCounts[state.colCountKey];
      const getter = [state.gutters[state.gutterKey], state.vgutters[state.vgutterKey]];
      let colCode = '<a-row :gutter="[' + getter + ']">\n';
      for (let i = 0; i < colCount; i++) {
        const spanNum = 24 / colCount;
        colCode += '  <a-col :span="' + spanNum + '"/>\n';
      }
      colCode += '</a-row>';
      return colCode;
    });
    return {
      rowColHtml,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped>
#components-grid-demo-playground :deep(.ant-col) {
  background: transparent;
  border: 0;
}
#components-grid-demo-playground :deep(.ant-col) > div {
  background: #00a0e9;
  height: 120px;
  line-height: 120px;
  font-size: 13px;
}
#components-grid-demo-playground pre {
  background: #f9f9f9;
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 16px;
}
</style>

                            

API#

Row

成员	说明	类型	默认值
align	flex 布局下的垂直对齐方式：`top` `middle` `bottom`	string	`top`
gutter	栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`1.5.0 后支持`）。	number/object/array	0
justify	flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between`	string	`start`
wrap	是否自动换行	boolean	false

Col

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