【Ant Design Vue】Grid栅格组件用法

这篇文章来介绍Ant中的Grid栅格，提一句，栅格是把横向区域等分为24份。划分之后的信息块称为盒子，每个盒子可以有多个区域组成（同一行的所有盒子的栅格加起来是24），建议横向排列的盒子数量最多四个，最少一个。基础栅格先来看一个基本的例子：<a-row><a-col :span="12"><div class="grid-content bg-blue-light"&

胡亥大魔王

13480人浏览 · 2021-12-04 23:14:30

胡亥大魔王 · 2021-12-04 23:14:30 发布

这篇文章来介绍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>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Xm5qtD8-1638630491522)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211204182227973.png)]$

每个<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 布局下的垂直对齐方式：top middle bottom

justify：flex 布局下的水平排列方式：start end center space-around space-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>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RZEzMMnx-1638630491523)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211204194333835.png)]$

这里将水平间距设置成了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>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x4WmVM8I-1638630491524)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211204224814015.png)]$

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>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y4x3FYfu-1638630491524)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211204225409683.png)]$

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>

运行结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MT9lAk68-1638630491525)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211204225706051.png)]$

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的时候

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMmB3DZH-1638630491525)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211204230523298.png)]$

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AyUIhnYU-1638630491526)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20211204230631645.png)]$