这篇文章来介绍Ant中的Grid栅格，提一句，栅格是把横向区域等分为24份。划分之后的信息块称为盒子，每个盒子可以有多个区域组成（同一行的所有盒子的栅格加起来是24），建议横向排列的盒子数量最多四个，最少一个。

基础栅格

先来看一个基本的例子：

<a-row><a-col :span="12"><div class="grid-content bg-blue-light"><span style="color: white;">col-12</span></div></a-col><a-col :span="12"><div class="grid-content bg-blue"><span style="color: white;">col-12</span></div></a-col></a-row><a-row><a-col :span="8"><div class="grid-content bg-blue-light"><span style="color: white;">col-8</span></div></a-col><a-col :span="8"><div class="grid-content bg-blue"><span style="color: white;">col-8</span></div></a-col><a-col :span="8"><div class="grid-content bg-blue-light"><span style="color: white;">col-8</span></div></a-col></a-row><a-row><a-col :span="6"><div class="grid-content bg-blue-light"><span style="color: white;">col-6</span></div></a-col><a-col :span="6"><div class="grid-content bg-blue"><span style="color: white;">col-6</span></div></a-col><a-col :span="6"><div class="grid-content bg-blue-light"><span style="color: white;">col-6</span></div></a-col><a-col :span="6"><div class="grid-content bg-blue"><span style="color: white;">col-6</span></div></a-col></a-row><style scoped>.bg-blue {background-color: #00a0e9;}.bg-blue-light {background-color: #43bdf5;}.grid-content {min-height: 36px;margin-top: 8px;margin-bottom: 8px;text-align: center;padding: 16px 0;}</style>

运行结果：

每个<a-row>代表一行，每个<a-col>代表一列，<a-col>中的:span="6"表示该列占6个栅格。同一<a-row>标签中所有<a-col>的span数之和应该是24。

Flex 布局

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

Row上的属性

type & align & justify

type：布局模式，可选flex

align：flex 布局下的垂直对齐方式：topmiddlebottom

justify：flex 布局下的水平排列方式：startendcenterspace-aroundspace-between

代码如下：

<p>Align Top</p><a-row type="flex" justify="center" align="top" class="bg-gray"><a-col :span="4"><div class="grid-content bg-blue-light height-100"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue height-50"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue-light height-120"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue height-80"><span style="color: white;">col-4</span></div></a-col></a-row><p>Align Center</p><a-row type="flex" justify="space-around" align="middle" class="bg-gray"><a-col :span="4"><div class="grid-content bg-blue-light height-100"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue height-50"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue-light height-120"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue height-80"><span style="color: white;">col-4</span></div></a-col></a-row><p>Align Bottom</p><a-row type="flex" justify="space-between" align="bottom" class="bg-gray"><a-col :span="4"><div class="grid-content bg-blue-light height-100"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue height-50"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue-light height-120"><span style="color: white;">col-4</span></div></a-col><a-col :span="4"><div class="grid-content bg-blue height-80"><span style="color: white;">col-4</span></div></a-col></a-row><style scoped>.bg-blue {background-color: #00a0e9;}.bg-blue-light {background-color: #43bdf5;}.grid-content {min-height: 36px;margin-top: 8px;margin-bottom: 8px;text-align: center;padding: 16px 0;}.height-50{height: 50px;}.height-80{height: 80px;}.height-100{height: 100px;}.height-120{height: 120px;}.bg-gray{background-color: rgba(239,239,239,0.37)}</style>

运行结果：

gutter

栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔{ xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置[水平间距, 垂直间距]（1.5.0 后支持）。

代码如下：

<a-row :gutter="[16,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-row :gutter="[16,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><style scoped>.gutter-example >>> .ant-row > div {background: transparent;border: 0;}.gutter-box {background: #00a0e9;padding: 5px 0;}</style>

运行结果：

这里将水平间距设置成了16，垂直间距设置成了32。

Col上的属性

flex

flex 布局填充，是不用flex布局填充的时候，可以代替span

代码如下：

<a-divider orientation="left">Percentage columns</a-divider><a-row type="flex"><a-col :flex="2"><div class="grid-content bg-blue-light"><span style="color: white;">2 / 5</span></div></a-col><a-col :flex="3"><div class="grid-content bg-blue"><span style="color: white;">3 / 5</span></div></a-col></a-row><a-divider orientation="left">Fill rest</a-divider><a-row type="flex"><a-col flex="100px"><div class="grid-content bg-blue-light"><span style="color: white;">100px</span></div></a-col><a-col flex="auto"><div class="grid-content bg-blue"><span style="color: white;">auto</span></div></a-col></a-row><a-divider orientation="left">Raw flex style</a-divider><a-row type="flex"><a-col flex="1 1 200px"><div class="grid-content bg-blue-light"><span style="color: white;">1 1 200px</span></div></a-col><a-col flex="0 1 300px"><div class="grid-content bg-blue"><span style="color: white;">0 1 300px</span></div></a-col></a-row>

运行结果：

offset

栅格左侧的间隔格数，间隔内不可以有栅格，可以实现列的左右偏移，:offset="4"将元素向右侧偏移了 4 个列（column）的宽度。

代码如下：

<a-row><a-col :span="8"><div class="grid-content bg-blue-light"><span style="color: white;">span="8"</span></div></a-col><a-col :span="8" :offset="8"><div class="grid-content bg-blue"><span style="color: white;">span="8" offset="8"</span></div></a-col></a-row><a-row><a-col :span="6" :offset="6"><div class="grid-content bg-blue-light"><span style="color: white;">span="6" offset="6"</span></div></a-col><a-col :span="6" :offset="6"><div class="grid-content bg-blue"><span style="color: white;">span="6" offset="6"</span></div></a-col></a-row><a-row><a-col :span="12" :offset="6"><div class="grid-content bg-blue"><span style="color: white;">span="12" offset="6"</span></div></a-col></a-row>

运行结果：

pull & push

pull：栅格向左移动格数

push：栅格向右移动格数

代码如下：

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

运行结果：

span

栅格占位格数，为 0 时相当于display: none，前面已经用过很多次了

响应式布局

xs<576px时触发响应

sm≥576px时触发响应

md≥768px时触发响应

lg≥992px时触发响应

xl≥1200px时触发响应

xxl≥1600px时触发响应

代码如下：

<a-row><a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10"><div class="grid-content bg-blue-light"><span style="color: white;">小于276px:2 大于576px:4 大于768px:6 >=992px:8 大于1200px:10</span></div></a-col><a-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4"><div class="grid-content bg-blue"><span style="color: white;">小于276px:20 大于576px:16 大于768px:12 >=992px:8 大于1200px:4</span></div></a-col><a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10"><div class="grid-content bg-blue-light"><span style="color: white;">小于276px:2 大于576px:4 大于768px:6 >=992px:8 大于1200px:10</span></div></a-col></a-row>

运行结果：

当父容器宽度大于1200px的时候

当父容器宽度小于1200px并且大于992px的时候

注意：同一行内的，所有xs的值之和应该为24，所有sm的值之和应该为24，以此类推

这篇文章就介绍到这里了，后面的文章将带大家对其他组件进行逐个使用，并分享开发中遇到的特殊用法，建议收藏