(جديد جدًا في هذا) أنا أحصل على مساحة بيضاء كبيرة أسفل .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>