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>

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

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

Answer 1

来自MDN：

fr单位为代表可用部分的一小部分网格容器中的空间。

用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>

Answer 2

您只需要为width或类似的框定义height和grid-block

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-block {
  border: 1px solid;
  /*here*/
  width:300px;
  height:70px;
  padding: 16% 0 16%;
  margin: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-block">Some random textSome random text</div>
  <div class="grid-block">Some random textSome random textSome random textSome random text</div>
  <div class="grid-block">Some random textSome random text</div>
  <div class="grid-block">Some random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random textSome random text</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>

Answer 3

fr可以使用auto单位代替grid-template-columns

进一步了解帧中继单元HERE!

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 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">1asdfasdfsadasdfa asdfas asd a adsa</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>

CSS-防止div内容调整父级的大小

3 个答案: