当使用“aspect-ratio: 1”使单元格成为正方形时，由正方形组成的 3 x 3 CSS 网格会溢出到容器之外

Question

我的目标是创建一个由正方形组成的 3 x 3 网格，它可以根据内容的大小进行调整，有角号，并且其文本内容垂直和水平居中。经过几个小时的尝试不同的方法来解决这个问题后，我在方形单元格和溢出容器之外之间做出了妥协。我尝试了不同的方法来实现 1:1 的宽高比，但这些方法与我的 html + css 不兼容。高度和宽度故意不设置为任何特定值，以启用单元格和网格的动态大小。

第一个片段显示了一个带有正方形的网格，带有角号。唯一的问题是内容溢出。网格容器必须具有相对位置，因为网格旁边的标签位于“绝对”位置，而我无法在此处包含该标签。

第二个片段的唯一区别是“aspect-ratio: 1”已被删除。网格的单元格不再溢出网格，但它们也不是正方形的。

有没有办法让方形网格单元适应内容宽度和高度而不溢出？

.basic-text {
     font-size: larger;
     font-family: Arial, Helvetica, sans-serif;
}
.fancy-card {
     border: 3px solid grey;
     border-radius: 15px;
     margin: 1em;
}
#output-card {
     display: inline-block;
     vertical-align: top;
}
#output-grid-container {
     margin: 1em;
     padding: 2em;
     position: relative;
     background-color: white;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 1fr);
     gap: 20px;
}
.grid-square {
     position: relative;
     border: 2px solid grey;
     border-radius: 3px;
     padding: 1em;
     aspect-ratio: 1;
     display: flex;
     justify-content: center;
    /* Center horizontally */
     align-items: center;
    /* Center vertically */
     text-align: center;
     line-height: 150%;
}
p {
     white-space: pre;
     text-wrap: wrap;
}
.corner-rating-number {
     position: absolute;
     bottom: 0.1em;
     left: 0.3em;
     margin: 0;
     padding: 0;
}
select {
     height: 2em;
     width: 10em;
     border-radius: 0.5em;
}

<div class="fancy-card" id="output-card">
  <div id="output-grid-container">
    <div class="grid-square">
      <span class="corner-rating-number basic-text">7</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">8</span>
      <p class="basic-text">Pink</p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">9</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">4</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">5</span>
      <p class="basic-text">Violet</p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">6</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">1</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">2</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">3</span>
      <p class="basic-text">Blue<br><br>Green</p>
    </div>
  </div>
</div>

.basic-text {
     font-size: larger;
     font-family: Arial, Helvetica, sans-serif;
}
.fancy-card {
     border: 3px solid grey;
     border-radius: 15px;
     margin: 1em;
}
#output-card {
     display: inline-block;
     vertical-align: top;
}
#output-grid-container {
     margin: 1em;
     padding: 2em;
     position: relative;
     background-color: white;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 1fr);
     gap: 20px;
}
.grid-square {
     position: relative;
     border: 2px solid grey;
     border-radius: 3px;
     padding: 1em;
     display: flex;
     justify-content: center;
    /* Center horizontally */
     align-items: center;
    /* Center vertically */
     text-align: center;
     line-height: 150%;
}
p {
     white-space: pre;
     text-wrap: wrap;
}
.corner-rating-number {
     position: absolute;
     bottom: 0.1em;
     left: 0.3em;
     margin: 0;
     padding: 0;
}
select {
     height: 2em;
     width: 10em;
     border-radius: 0.5em;
}

<div class="fancy-card" id="output-card">
  <div id="output-grid-container">
    <div class="grid-square">
      <span class="corner-rating-number basic-text">7</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">8</span>
      <p class="basic-text">Pink</p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">9</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">4</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">5</span>
      <p class="basic-text">Violet</p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">6</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">1</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">2</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">3</span>
      <p class="basic-text">Blue<br><br>Green</p>
    </div>
  </div>
</div>

Answer 1

你问“有没有办法让方形网格单元适应内容的宽度和高度而不溢出？”，但是

aspect-ratio

是关于宽度与高度的比率......所以在正常情况下当高度大于宽度时，你将无法得到正方形。
因此，可以做的就是

.grid-square

不拉伸并且是正方形...最简单的方法是添加

overflow: hidden;

或

min-width: 0; minimum height: 0;

：

.basic-text {
     font-size: larger;
     font-family: Arial, Helvetica, sans-serif;
}
.fancy-card {
     border: 3px solid grey;
     border-radius: 15px;
     margin: 1em;
}
#output-card {
     display: inline-block;
     vertical-align: top;
}
#output-grid-container {
     margin: 1em;
     padding: 2em;
     position: relative;
     background-color: white;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(3, 1fr);
     gap: 20px;
}
.grid-square {
     position: relative;
     border: 2px solid grey;
     border-radius: 3px;
     padding: 1em;
     aspect-ratio: 1;
     display: flex;
     justify-content: center;
    /* Center horizontally */
     align-items: center;
    /* Center vertically */
     text-align: center;
     line-height: 150%;
     
     overflow: hidden;
     /* min-width: 0; */
     /* min-height:0; */
}
p {
     white-space: pre;
     text-wrap: wrap;
}
.corner-rating-number {
     position: absolute;
     bottom: 0.1em;
     left: 0.3em;
     margin: 0;
     padding: 0;
}
select {
     height: 2em;
     width: 10em;
     border-radius: 0.5em;
}

<div class="fancy-card" id="output-card">
  <div id="output-grid-container">
    <div class="grid-square">
      <span class="corner-rating-number basic-text">7</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">8</span>
      <p class="basic-text">Pink</p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">9</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">4</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">5</span>
      <p class="basic-text">Violet</p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">6</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">1</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">2</span>
      <p class="basic-text"></p>
    </div>
    <div class="grid-square">
      <span class="corner-rating-number basic-text">3</span>
      <p class="basic-text">Blue<br><br>Green</p>
    </div>
  </div>
</div>