Grid 栅格

24 栅格系统。

设计理念

Grid栅格 - 图1

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

概述

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

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

    Flex 布局

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

    代码演示

Grid栅格 - 图2

基础栅格

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

  1. <template>
  2. <div>
  3. <a-row>
  4. <a-col :span="12">
  5. col-12
  6. </a-col>
  7. <a-col :span="12">
  8. col-12
  9. </a-col>
  10. </a-row>
  11. <a-row>
  12. <a-col :span="8">
  13. col-8
  14. </a-col>
  15. <a-col :span="8">
  16. col-8
  17. </a-col>
  18. <a-col :span="8">
  19. col-8
  20. </a-col>
  21. </a-row>
  22. <a-row>
  23. <a-col :span="6">
  24. col-6
  25. </a-col>
  26. <a-col :span="6">
  27. col-6
  28. </a-col>
  29. <a-col :span="6">
  30. col-6
  31. </a-col>
  32. <a-col :span="6">
  33. col-6
  34. </a-col>
  35. </a-row>
  36. </div>
  37. </template>

Grid栅格 - 图3

Flex 对齐

Flex 子元素垂直对齐。

  1. <template>
  2. <div>
  3. <p>Align Top</p>
  4. <a-row type="flex" justify="center" align="top">
  5. <a-col :span="4">
  6. <p class="height-100">
  7. col-4
  8. </p>
  9. </a-col>
  10. <a-col :span="4">
  11. <p class="height-50">
  12. col-4
  13. </p>
  14. </a-col>
  15. <a-col :span="4">
  16. <p class="height-120">
  17. col-4
  18. </p>
  19. </a-col>
  20. <a-col :span="4">
  21. <p class="height-80">
  22. col-4
  23. </p>
  24. </a-col>
  25. </a-row>
  26. <p>Align Center</p>
  27. <a-row type="flex" justify="space-around" align="middle">
  28. <a-col :span="4">
  29. <p class="height-100">
  30. col-4
  31. </p>
  32. </a-col>
  33. <a-col :span="4">
  34. <p class="height-50">
  35. col-4
  36. </p>
  37. </a-col>
  38. <a-col :span="4">
  39. <p class="height-120">
  40. col-4
  41. </p>
  42. </a-col>
  43. <a-col :span="4">
  44. <p class="height-80">
  45. col-4
  46. </p>
  47. </a-col>
  48. </a-row>
  49. <p>Align Bottom</p>
  50. <a-row type="flex" justify="space-between" align="bottom">
  51. <a-col :span="4">
  52. <p class="height-100">
  53. col-4
  54. </p>
  55. </a-col>
  56. <a-col :span="4">
  57. <p class="height-50">
  58. col-4
  59. </p>
  60. </a-col>
  61. <a-col :span="4">
  62. <p class="height-120">
  63. col-4
  64. </p>
  65. </a-col>
  66. <a-col :span="4">
  67. <p class="height-80">
  68. col-4
  69. </p>
  70. </a-col>
  71. </a-row>
  72. </div>
  73. </template>

Grid栅格 - 图4

Flex 排序

从堆叠到水平排列。
通过 Flex 布局的 Order 来改变元素的排序。

  1. <template>
  2. <div>
  3. <a-row type="flex">
  4. <a-col :span="6" :order="4">
  5. 1 col-order-4
  6. </a-col>
  7. <a-col :span="6" :order="3">
  8. 2 col-order-3
  9. </a-col>
  10. <a-col :span="6" :order="2">
  11. 3 col-order-2
  12. </a-col>
  13. <a-col :span="6" :order="1">
  14. 4 col-order-1
  15. </a-col>
  16. </a-row>
  17. </div>
  18. </template>

Grid栅格 - 图5

Flex 布局

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

  1. <template>
  2. <div>
  3. <p>sub-element align left</p>
  4. <a-row type="flex" justify="start">
  5. <a-col :span="4">
  6. col-4
  7. </a-col>
  8. <a-col :span="4">
  9. col-4
  10. </a-col>
  11. <a-col :span="4">
  12. col-4
  13. </a-col>
  14. <a-col :span="4">
  15. col-4
  16. </a-col>
  17. </a-row>
  18. <p>sub-element align center</p>
  19. <a-row type="flex" justify="center">
  20. <a-col :span="4">
  21. col-4
  22. </a-col>
  23. <a-col :span="4">
  24. col-4
  25. </a-col>
  26. <a-col :span="4">
  27. col-4
  28. </a-col>
  29. <a-col :span="4">
  30. col-4
  31. </a-col>
  32. </a-row>
  33. <p>sub-element align right</p>
  34. <a-row type="flex" justify="end">
  35. <a-col :span="4">
  36. col-4
  37. </a-col>
  38. <a-col :span="4">
  39. col-4
  40. </a-col>
  41. <a-col :span="4">
  42. col-4
  43. </a-col>
  44. <a-col :span="4">
  45. col-4
  46. </a-col>
  47. </a-row>
  48. <p>sub-element monospaced arrangement</p>
  49. <a-row type="flex" justify="space-between">
  50. <a-col :span="4">
  51. col-4
  52. </a-col>
  53. <a-col :span="4">
  54. col-4
  55. </a-col>
  56. <a-col :span="4">
  57. col-4
  58. </a-col>
  59. <a-col :span="4">
  60. col-4
  61. </a-col>
  62. </a-row>
  63. <p>sub-element align full</p>
  64. <a-row type="flex" justify="space-around">
  65. <a-col :span="4">
  66. col-4
  67. </a-col>
  68. <a-col :span="4">
  69. col-4
  70. </a-col>
  71. <a-col :span="4">
  72. col-4
  73. </a-col>
  74. <a-col :span="4">
  75. col-4
  76. </a-col>
  77. </a-row>
  78. </div>
  79. </template>

Grid栅格 - 图6

区块间隔

栅格常常需要和间隔进行配合,你可以使用 Rowgutter 属性,我们推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)
如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }
如果需要垂直间距,可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]

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

  1. <template>
  2. <div class="gutter-example">
  3. <a-row :gutter="16">
  4. <a-col class="gutter-row" :span="6">
  5. <div class="gutter-box">
  6. col-6
  7. </div>
  8. </a-col>
  9. <a-col class="gutter-row" :span="6">
  10. <div class="gutter-box">
  11. col-6
  12. </div>
  13. </a-col>
  14. <a-col class="gutter-row" :span="6">
  15. <div class="gutter-box">
  16. col-6
  17. </div>
  18. </a-col>
  19. <a-col class="gutter-row" :span="6">
  20. <div class="gutter-box">
  21. col-6
  22. </div>
  23. </a-col>
  24. </a-row>
  25. </div>
  26. </template>
  27. <style scoped>
  28. .gutter-example >>> .ant-row > div {
  29. background: transparent;
  30. border: 0;
  31. }
  32. .gutter-box {
  33. background: #00a0e9;
  34. padding: 5px 0;
  35. }
  36. </style>

Grid栅格 - 图7

左右偏移

列偏移。
使用 offset 可以将列向右侧偏。例如,:offset="4" 将元素向右侧偏移了 4 个列(column)的宽度。

  1. <template>
  2. <div>
  3. <a-row>
  4. <a-col :span="8">
  5. col-8
  6. </a-col>
  7. <a-col :span="8" :offset="8">
  8. col-8
  9. </a-col>
  10. </a-row>
  11. <a-row>
  12. <a-col :span="6" :offset="6">
  13. col-6 col-offset-6
  14. </a-col>
  15. <a-col :span="6" :offset="6">
  16. col-6 col-offset-6
  17. </a-col>
  18. </a-row>
  19. <a-row>
  20. <a-col :span="12" :offset="6">
  21. col-12 col-offset-6
  22. </a-col>
  23. </a-row>
  24. </div>
  25. </template>

Grid栅格 - 图8

其他属性的响应式

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

  1. <template>
  2. <a-row>
  3. <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
  4. Col
  5. </a-col>
  6. <a-col :xs="{ span: 11, offset: 1 }" :lg="{ span: 6, offset: 2 }">
  7. Col
  8. </a-col>
  9. <a-col :xs="{ span: 5, offset: 1 }" :lg="{ span: 6, offset: 2 }">
  10. Col
  11. </a-col>
  12. </a-row>
  13. </template>

Grid栅格 - 图9

响应式布局

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

  1. <template>
  2. <a-row>
  3. <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
  4. Col
  5. </a-col>
  6. <a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4">
  7. Col
  8. </a-col>
  9. <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10">
  10. Col
  11. </a-col>
  12. </a-row>
  13. </template>

Grid栅格 - 图10

栅格排序

列排序。
通过使用 pushpull 类就可以很容易的改变列(column)的顺序。

  1. <template>
  2. <div>
  3. <a-row>
  4. <a-col :span="18" :push="6">
  5. col-18 col-push-6
  6. </a-col>
  7. <a-col :span="6" :pull="18">
  8. col-6 col-pull-18
  9. </a-col>
  10. </a-row>
  11. </div>
  12. </template>

Grid栅格 - 图11

栅格配置器

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

  1. <template>
  2. <div id="components-grid-demo-playground">
  3. <div style="margin-bottom:16px">
  4. <span style="margin-right:6px">Horizontal Gutter (px): </span>
  5. <div style="width:50%">
  6. <a-slider
  7. v-model="gutterKey"
  8. :min="0"
  9. :max="Object.keys(gutters).length - 1"
  10. :marks="gutters"
  11. :step="null"
  12. />
  13. </div>
  14. <span style="margin-right: 6px">Vertical Gutter (px): </span>
  15. <div style="width: 50%">
  16. <a-slider
  17. v-model="vgutterKey"
  18. :min="0"
  19. :max="Object.keys(vgutters).length - 1"
  20. :marks="vgutters"
  21. :step="null"
  22. />
  23. </div>
  24. <span style="margin-right:6px">Column Count:</span>
  25. <div style="width:50%">
  26. <a-slider
  27. v-model="colCountKey"
  28. :min="0"
  29. :max="Object.keys(colCounts).length - 1"
  30. :marks="colCounts"
  31. :step="null"
  32. />
  33. </div>
  34. </div>
  35. <a-row :gutter="[gutters[gutterKey], vgutters[vgutterKey]]">
  36. <a-col
  37. v-for="(item, index) in colCounts[colCountKey]"
  38. :key="item.toString()"
  39. :span="24 / colCounts[colCountKey]"
  40. >
  41. <div>Column</div>
  42. </a-col>
  43. </a-row>
  44. <a-row :gutter="[gutters[gutterKey], vgutters[vgutterKey]]">
  45. <a-col
  46. v-for="(item, index) in colCounts[colCountKey]"
  47. :key="item.toString()"
  48. :span="24 / colCounts[colCountKey]"
  49. >
  50. <div>Column</div>
  51. </a-col>
  52. </a-row>
  53. <pre v-text="rowColHtml" />
  54. <pre v-text="rowColHtml" />
  55. </div>
  56. </template>
  57. <script>
  58. export default {
  59. data() {
  60. const gutters = {};
  61. const colCounts = {};
  62. const vgutters = {};
  63. [8, 16, 24, 32, 40, 48].forEach((value, i) => {
  64. gutters[i] = value;
  65. });
  66. [8, 16, 24, 32, 40, 48].forEach((value, i) => {
  67. vgutters[i] = value;
  68. });
  69. [2, 3, 4, 6, 8, 12].forEach((value, i) => {
  70. colCounts[i] = value;
  71. });
  72. return {
  73. gutterKey: 1,
  74. vgutterKey: 1,
  75. colCountKey: 2,
  76. colCounts,
  77. gutters,
  78. vgutters,
  79. };
  80. },
  81. computed: {
  82. rowColHtml() {
  83. const colCount = this.colCounts[this.colCountKey];
  84. const getter = [this.gutters[this.gutterKey], this.vgutters[this.vgutterKey]];
  85. let colCode = '<a-row :gutter="[' + getter + ']">\n';
  86. for (let i = 0; i < colCount; i++) {
  87. const spanNum = 24 / colCount;
  88. colCode += ' <a-col :span="' + spanNum + '"/>\n';
  89. }
  90. colCode += '</a-row>';
  91. return colCode;
  92. },
  93. },
  94. };
  95. </script>
  96. <style scoped>
  97. #components-grid-demo-playground [class~='ant-col'] {
  98. background: transparent;
  99. border: 0;
  100. }
  101. #components-grid-demo-playground [class~='ant-col'] > div {
  102. background: #00a0e9;
  103. height: 120px;
  104. line-height: 120px;
  105. font-size: 13px;
  106. }
  107. #components-grid-demo-playground pre {
  108. background: #f9f9f9;
  109. border-radius: 6px;
  110. font-size: 13px;
  111. padding: 8px 16px;
  112. }
  113. </style>

API

Row

成员说明类型默认值
alignflex 布局下的垂直对齐方式:top middle bottomstringtop
gutter栅格间隔,可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]1.5.0 后支持)。number/object/array0
justifyflex 布局下的水平排列方式:start end center space-around space-betweenstringstart
type布局模式,可选 flex现代浏览器 下有效string

Col

成员说明类型默认值
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-

响应式栅格的断点扩展自 BootStrap 4 的规则(不包含链接里 occasionally 的部分)。

FAQ

IE9 响应式不工作怎么办?

可以引入 matchMedia polyfill 添加支持。