在这里我使用vant的插件是Grid宫格

我的：
编译器：vscode
这里给出vant的官网：https://vant-contrib.gitee.io/vant/#/zh-CN/home

在vant的Grid宫格中我用的是[格子间距]
官方代码如下：

<van-grid :gutter="10">
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>

官网的效果图示是这样的：

然后我想要它一共是三行，所以对代码进行了修改：

<van-grid :gutter="10"
  <van-grid-item v-for="value in 12" :key="value" icon="photo-o" text="文字" />
</van-grid>

gutter是设置格子的间距，我没有修改，用的默认的10

原来的v-for=“value in 8”，我改为了v-for=“value in 12”，也就是说，一行四个，三行就是12个

然后我的界面是这样的：

可以看出下面那一部分是溢出的。
那么，怎么修改让它可以装进去而且多出来的界面可以进行滑动来显示呢？
非常简单，只需要改两个地方：

1. 装这个格子的div的高度
   我在把这段代码插入的时候，给它包裹了一个div，这样修改div的高度就可以限制它，让它显示出来的地方刚好是这个底部栏的上面，具体多大可以自己调着试一下。
   这里贴一下我调出来的界面：
   
   当然，如果你还想让它的高度再小一点也可以，但距离底部就会有边距，如果你没有设置背景颜色就都是白色，可能看不太出来，但如果有背景颜色，就会比较明显，像这样：
   
   我不知道有没有那种可以随着界面的大小改变而改变的那种属性，如果有谁知道可以告诉一下我呀，毕竟这是手机端界面，如果手机型号不同，肯定页面大小不同，这样只是把大小写死了，没办法自适应。

然后做完这一步只限制它还没用，下面还是出来的，然后就来做第二步。
2. 装整个界面的div里的overflow属性
比如我的界面设计是：

那么我就在container的css样式中添加overflow属性：

<style>
	.container{
    	background-color:floralwhite;/*这是我加的背景颜色*/
    	overflow: auto;
	}
</style>

效果就是这样的：

滑下去长这样：
可以看到右边还有一小道线，那个是叫滚动条…吧，可以随着你的滑动上下移动，然后几秒钟就会消失。
好滴，今天就说这么多~