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>

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

CSS grid repeat columns auto-fill and minmax doesn't make all columns te same size

html

css

css-grid