（这是很新的东西）我的.grid#类下面有很多空白...我用海蓝宝石给它上色，以显示第二行框下面正在生成的空间。如果有人知道如何解决此问题，那么多余的空间就会消失，那将非常有帮助。
我认为可能是网格类弄乱了它，但是我不确定如何简化它。
div{
background-color:aquamarine;
}
.grid1 {
float: center;
margin: 0 auto;
width:25vw;
max-width: 25vh;
height: 25vw;
max-height: 25vh;
font-size: 2rem;
}
.grid2 {
float: center;
margin: 0 auto;
width:75vw;
max-width: 75vh;
height: 75vw;
max-height: 75vh;
font-size: 2rem;
}
.row {
display: flex;
}
.box {
background: red;
margin: 5px;
color: white;
font-weight: bold;
flex: 1 0 auto;
position: relative;
}
.box:after {
content: "";
float: left;
display: block;
padding-top: 100%;
}
.box > div {
background-position: center;
background-size:cover;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 8px rgb(36, 36, 36), 0px 0px 20px rgba(0, 0, 0, 0.9);
}
.inner1 {
background-color: red;
}
.inner2 {
background-color: blue;
}<body>
<div class="grid1">
<div class="row">
<div class="box">
<div class="inner1">1</div>
</div>
</div>
</div>
<div class="grid2">
<div class="row">
<div class="box">
<div class="inner2">2</div>
</div>
<div class="box">
<div class="inner2">3</div>
</div>
<div class="box">
<div class="inner2">4</div>
</div>
</div>
</div>
</body>最佳答案
模板创建/集成的最佳实践之一是使用引导程序。
Bootstrap是一个不断增长的标准，这是有充分理由的。.因此，您不必编写很难维护的代码，并且最终将完成Bootstrap打算做的事情，并且做得很好。此外，您将更快地找到帮助方式，因为每个人都会了解您打算做什么以及如何更正代码。
无论如何：
您必须删除“身高”，以适应所需的尺寸。
.grid2 {
float: center;
margin: 0 auto;
width: 75vw;
max-width: 75vh;
/* height: 75vw; */
max-height: 75vh;
font-size: 2rem;
}