Html 如何使div填充整个屏幕（砖石/针孔）布局

两个问题：

1） 为什么我的div中的列不会填满页面（占据空白），而不会溢出到下一列？（运行代码段时，单击“查看完整页面”。）

2） 如何使专栏更具响应性？（即，当我更改屏幕大小时，让列放大和缩小，而不是将每列向左收缩或向右拉伸）

#容器{
/*最小高度：100vh*/
/*最小宽度：100vw*/
栅隙：10px；
}
.栏目{
-moz列数：5；
-莫兹柱间距：1米；
-moz列宽：40%；
-webkit列数：5；
-webkit柱间距：1米；
-webkit列宽：40%；
列数：5；
柱间距：1米；
列宽：40%；
}
.盒子{
边缘底部：10px；
}
1号包厢{
高度：230像素；
背景颜色：灰色；
}
.盒子2{
高度：230像素；
背景颜色：灰色；
}
.三号包厢{
背景颜色：粉红色；
高度：230像素；
}
.四号包厢{
背景颜色：灰色；
高度：180像素；
}
.五号包厢{
背景颜色：橙色；
高度：170px；
}
.六号包厢{
背景颜色：灰色；
高度：180像素；
}
.七号包厢{
背景颜色：灰色；
高度：200px；
}
.八号包厢{
背景颜色：蓝色；
高度：200px；
}
.九号包厢{
背景颜色：灰色；
高度：200px；
}
.十号包厢{
背景颜色：绿色；
高度：200px；
}
.包厢11号{
背景颜色：灰色；
高度：200px；
}
.包厢12{
背景颜色：灰色；
高度：200px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

为了根据屏幕大小做出响应，您需要添加媒体查询，例如：

@media(max-width:700px){
}

当屏幕宽度小于或等于700px时，你只需要在里面放上你想让你的网站看起来像什么就可以了。例如，如果自然地，你在计算机上有一个半宽的div，你可以这样做：

div {
    width: 50%;
}

然后，如果您在电话屏幕上，并且希望使该div全宽，您只需添加：

div {
    width: 50%;
}
@media(max-width:600px) {
    div {
         width: 100%;
    }
}

---

它会相应地改变，希望这有帮助

没问题，如果你需要更多的帮助，请告诉我