【AntDesignVue】Grid栅格组件⽤法
这篇⽂章来介绍Ant中的Grid栅格，提⼀句，栅格是把横向区域等分为24份。划分之后的信息块称为盒⼦，每个盒⼦可以有多个区域组成（同⼀⾏的所有盒⼦的栅格加起来是24），建议横向排列的盒⼦数量最多四个，最少⼀个。
基础栅格
先来看⼀个基本的例⼦：
<a-row>
<a-col :span="12">
<div class="grid-content bg-blue-light">
<span >col-12</span>
</div>
</a-col>
<a-col :span="12">
<div class="grid-content bg-blue">
<span >col-12</span>
</div>
</a-col>
</a-row>
<a-row>
<a-col :span="8">
<div class="grid-content bg-blue-light">
<span >col-8</span>
</div>
</a-col>
<a-col :span="8">
<div class="grid-content bg-blue">
<span >col-8</span>
</div>
</a-col>
<a-col :span="8">
<div class="grid-content bg-blue-light">
<span >col-8</span>
</div>
</a-col>
</a-row>
<a-row>
<a-col :span="6">
<div class="grid-content bg-blue-light">
<span >col-6</span>
</div>
</a-col>
<a-col :span="6">
<div class="grid-content bg-blue">
<span >col-6</span>
</div>
</a-col>
<a-col :span="6">
<div class="grid-content bg-blue-light">
<span >col-6</span>
</div>
</a-col>
<a-col :span="6">
<div class="grid-content bg-blue">
<span >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 布局下的垂直对齐⽅式：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 >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue height-50">
<span >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue-light height-120">
<span >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue height-80">
<span >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 >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue height-50">
<span >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue-light height-120">
<span >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue height-80">
<span >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 >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue height-50">
<span >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue-light height-120">
<span >col-4</span>
</div>
</a-col>
<a-col :span="4">
<div class="grid-content bg-blue height-80">
<span >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">
flex布局对齐方式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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。