html - CSS网格重复列自动填充和minmax不会使所有列的大小相同

Question

我有一个使用 CSS 网格的元素。我刚开始使用 CSS 网格，并找到了这个解决方案，了解如何制作响应式网格，根据可用的宽度自动调整其元素的大小。

问题是并非所有元素都不会同时调整大小。单词较小的元素与单词较大的元素的尺寸不同。

如下图所示，包含“Hellooooo world”的元素较大，而包含“Hello”的元素较小。

我希望网格的所有子项都以相同的宽度调整大小。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, auto));
  gap: 1rem;
}

.item {
  background-color: red;
}

<div class="grid">
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
</div>

Answer 1

将grid-template-columns:repeat(auto-fill, minmax(5rem, auto));更改为grid-template-columns:repeat(auto-fill,minmax(5rem) , 1fr));

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 1rem;
}

.item {
  background-color: red;
}

<div class="grid">
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
  <div class="item">
    <p>Hellooooo world</p>
  </div>
  <div class="item">
    <p>Hello</p>
  </div>
</div>