如何根据屏幕的大小使我的网格容器的高度变成方形?

问题描述 投票:0回答:1

我正在尝试创建一个 3 列 3 行(总共 9 个单元格)的网格。我希望网格是方形的,无论设备大小如何(响应式)。

我需要的理想网格:

Ideal Grid I need

我已经在笔记本电脑屏幕上实现了上述网格,但是当我在移动设备或其他设备中测试它时,我的网格单元变成了矩形。

移动端的矩形网格:

Rectangular grid in mobile

我怎样才能让它们保持正方形?

这是我的代码。我有一个 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>

html css flexbox css-grid
1个回答
0
投票

将以下内容添加到您的 css .grid-item 部分:

aspect-ratio: 1 / 1;
© www.soinside.com 2019 - 2024. All rights reserved.