Html 与窗高匹配的响应式正方形网格

发布于10月21日

我正在try 创建响应网格的正方形(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>