Html 如何为移动设备制作网格布局堆栈？

我正在参与的学校项目的现状：

如果你打开这个项目站点，你会看到5个盒子挨着一个，里面都写着“limited”

我已将父级（第2节）作为网格。但很明显，它缺少了一些东西，而这些东西并不能使它做出反应。我想知道如何将其设置为响应性，即在较小的屏幕尺寸上，框显示在彼此下方，但当框显示在彼此下方时，它们之间也有间隙

以下是该部分的代码：

。第2节{
显示：网格；
网格模板列：重复（自动拟合，20%）；
}
.men__有限公司，
.women__limited，
.junior__有限公司，
.齿轮有限公司，
.explore__有限公司{
字体系列：var（--nav字体）；
宽度：100%；
高度：300px；
位置：相对位置；
溢出：隐藏；
保证金：0；
}
.men_uLimited>a>img，
.women_uLimited>a>img，
.junior_uuLimited>a>img，
.gears_uuLimited>a>img，
.浏览\uuu limited>a>img{
对象匹配：覆盖；
宽度：100%；
最大高度：100%；
身高：100%；
}
.men_uuLimited>a>.men_uuLimited--title>h1，
.women\uuuu limited>a>。men\uuuu limited--title>h1，
.junior\uuuu limited>a>.men\uuuu limited--title>h1，
.gears\uuuu limited>a>.men\uuuu limited--title>h1，
.explore\uu limited>a>.men\uu limited--title>h1{
位置：绝对位置；
顶部：20%；/*这些行以文本为中心*/
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
颜色：var（--黑色）；
字号：2rem；
}
.men_uuuLimited>a>.men_uuuLimited——头衔，
.women\uuuu limited>a>。men\uuuu limited——头衔，
.junior\uuuu limited>a>.men\uuuu limited——头衔，
.gears\uuuu limited>a>.men\uuuu limited--标题，
.explore\uu limited>a>.men\uu limited--title，
.vip>.men\u limited--标题{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景色：rgba（255、255、255、0.5）；
不透明度：100；
过渡：全部为0.4s；
z指数：4；
}
.men\uuu limited>a>.men\uuu limited--标题：悬停，
.women\uuuu limited>a>.men\uuuu limited——标题：悬停，
.junior\uuuu limited>a>.men\uuuu limited--标题：悬停，
.gears\uuuu limited>a>.men\uuuu limited--标题：悬停，
.explore\u limited>a>.men\u limited--标题：悬停{
背景色：rgba（1731731730.4）；
不透明度：100；
过渡：全部为0.4s；
z指数：4；
}
.men\u limited>a>.limited\u btn，
.women\uu limited>a>.limited\uuu btn，
.junior\u limited>a>.limited\u btn，
.gears\uuu limited>a>.limited\uuu btn，
.explore\uu limited>a>.limited\uu btn，
.vip>a>有限公司{
背景：透明；
背景色：rgb（255、255、255、0.5）；
边框：1px实心rgb（1121121120.8）；
边界半径：4px；
框大小：边框框；
颜色：var（--黑色）；
显示：绝对；
身高：4rem；
字号：1.4em；
字号：600；
位置：相对位置；
文字装饰：无；
宽度：14rem；
位置：绝对位置；
底部：2%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：4；
文本转换：大写；
光标：指针；
}
.men\uuu limited>a>.limited\uuuu btn:悬停，
.women\uuu limited>a>.limited\uuuu btn:悬停，
.junior\uuuu limited>a>.limited\uuuuu btn:悬停，
.gears\uuuu limited>a>.limited\uuuuu btn:悬停，
.explore\u limited>a>.limited\u btn:悬停，
.vip>a>.limited\uu btn:悬停{
背景色：var（--白色）；
}
.men__有限公司-标题>h1{
位置：绝对位置；
顶部：40%；/*这些行以文本为中心*/
左：50%；
转换：翻译（-50%，-50%）；
}

有限的男性

提供
现在探索
有限女性优惠
现在探索
有限初级优惠
现在探索
有限齿轮提供
现在探索
有限冒险优惠
现在探索

您在规则

网格模板列中指定
20%
：重复（自动调整，20%）

，因此当屏幕大小更改时，您的框将不会响应。我给出了一个使用

媒体查询
的示例。有必要吗


。第2节{
显示：网格；
/*网格模板列：重复（自动拟合，20%）*/
网格模板列：重复（5，1fr）；
}
.men__有限公司，
.women__limited，
.junior__有限公司，
.齿轮有限公司，
.explore__有限公司{
字体系列：var（--nav字体）；
宽度：100%；
高度：300px；
位置：相对位置；
溢出：隐藏；
保证金：0；
}
.men_uLimited>a>img，
.women_uLimited>a>img，
.junior_uuLimited>a>img，
.gears_uuLimited>a>img，
.浏览\uuu limited>a>img{
对象匹配：覆盖；
宽度：100%；
最大高度：100%；
身高：100%；
}
.men_uuLimited>a>.men_uuLimited--title>h1，
.women\uuuu limited>a>。men\uuuu limited--title>h1，
.junior\uuuu limited>a>.men\uuuu limited--title>h1，
.gears\uuuu limited>a>.men\uuuu limited--title>h1，
.explore\uu limited>a>.men\uu limited--title>h1{
位置：绝对位置；
顶部：20%；/*这些行以文本为中心*/
左：50%；
转换：翻译（-50%，-50%）；
文本对齐：居中；
颜色：var（--黑色）；
字号：2rem；
}
.men_uuuLimited>a>.men_uuuLimited——头衔，
.women\uuuu limited>a>。men\uuuu limited——头衔，
.junior\uuuu limited>a>.men\uuuu limited——头衔，
.gears\uuuu limited>a>.men\uuuu limited--标题，
.explore\uu limited>a>.men\uu limited--title，
.vip>.men\u limited--标题{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景色：rgba（255、255、255、0.5）；
不透明度：100；
过渡：全部为0.4s；
z指数：4；
}
.men\uuu limited>a>.men\uuu limited--标题：悬停，
.women\uuuu limited>a>.men\uuuu limited——标题：悬停，
.junior\uuuu limited>a>.men\uuuu limited--标题：悬停，
.gears\uuuu limited>a>.men\uuuu limited--标题：悬停，
.explore\u limited>a>.men\u limited--标题：悬停{
背景色：rgba（1731731730.4）；
不透明度：100；
过渡：全部为0.4s；
z指数：4；
}