html - CSS - 防止 div 内容调整父元素的大小

Question

我有一个盒子网格，我想在上面显示一些内容。但是，我也希望它们都具有相同的大小(根据窗口大小缩放)。

我有以下代码:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-block {
  border: 1px solid;
  padding: 16% 0 16%;
  margin: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-block">1</div>
  <div class="grid-block">2</div>
  <div class="grid-block">3</div>
  <div class="grid-block">4</div>
  <div class="grid-block">5</div>
  <div class="grid-block">6</div>
  <div class="grid-block">7</div>
  <div class="grid-block">8</div>
  <div class="grid-block">9</div>
</div>

在这里，如果我用一些文本替换“网格 block ”div 中的任何数字，整个框和同一列中的所有框都会调整大小。

我想强制所有框的大小相同(随着窗口的增大或缩小而缩放)。

Answer 1

来自 MDN :

The fr unit as a unit which represents a fraction of the available space in the grid container.

将 auto 与 fr 交换可以解决您的问题。

编辑:为了使高度保持相等(但不固定)，我使用了 minmax 函数。我告诉网格，每个单元格必须至少其默认大小auto，并且最多为网格的 1 个相等分数。结果就是你所追求的。如果一个单元格包含大量文本并且增长了很多，则其他单元格将与最大单元格增长到的任何部分相当。

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, minmax(auto, 1fr));
  padding: 10px;
}

.grid-block {
  border: 1px solid;
  padding: 16% 0 16%;
  margin: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-block">1</div>
  <div class="grid-block">Lots of text in here</div>
  <div class="grid-block">3</div>
  <div class="grid-block">Lots and lots and lots and lots of text in here as well</div>
  <div class="grid-block">5</div>
  <div class="grid-block">6</div>
  <div class="grid-block">7</div>
  <div class="grid-block">8</div>
  <div class="grid-block">9</div>
</div>