我正在尝试创建响应式正方形网格(3x3,然后 5x5)。下面的代码正确地创建了一个正方形网格,该网格随着窗口缩小而变小。但是,我想将整个容器的最大高度限制为浏览器窗口的高度。这意味着我必须限制单个正方形的高度。但是当我将
min-height
和 max-height
设置为正方形时,宽度没有改变。
.square-container {
display: grid;
grid-template-columns:repeat(3,1fr);
grid-gap: 10px;
}
.square {
border: 1px solid;
border-radius: 5px;
aspect-ratio:1/1;
}
<div class="square-container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
</div>
将逻辑应用到容器
.square-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr; /* equal rows*/
gap: 10px;
aspect-ratio: 1; /* make the container a square */
/* limit the width and height */
max-height: 100vh;
max-width: 100%;
/* center horizontally */
margin: auto;
}
.square {
border: 1px solid;
border-radius: 5px;=
/* full width and height*/
height: 100%;
width: 100%;
/**/
box-sizing: border-box;
}
body {
margin: 0;
}
<div class="square-container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
</div>