开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【Ant Design Vue】Grid栅格组件用法 -> 正文阅读

[JavaScript知识库]【Ant Design Vue】Grid栅格组件用法

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