我正在尝试创建一个 3 列 3 行(总共 9 个单元格)的网格。我希望网格是方形的,无论设备大小如何(响应式)。
我需要的理想网格:
我已经在笔记本电脑屏幕上实现了上述网格,但是当我在移动设备或其他设备中测试它时,我的网格单元变成了矩形。
移动端的矩形网格:
我怎样才能让它们保持正方形?
这是我的代码。我有一个 Flex 容器,高度为 80vh(剩余 20vh 用于页眉和页脚)。在弹性容器中,我有网格容器,网格中的每个项目又都是弹性项目。
这是我的代码:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 1rem;
}
.grid-wrapper {
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
.grid-gameboard-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
min-height: 50vh;
grid-gap: 5px;
}
.grid-item {
background-color: lightblue;
display: flex;
min-width: 100px;
justify-content: center;
align-items: center;
cursor: pointer;
}
<div class="grid-wrapper">
<div class='grid-gameboard-container'>
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
将以下内容添加到您的 css .grid-item 部分:
aspect-ratio: 1 / 1;