CSS - 使用 max 为特定长度的 minmax 时，网格自动调整不起作用

Question

我有一个项目，我想在其中使用网格。我找到了一种非常简单的方法来在 div 中显示一组随机的子元素。我将 auto-fit 与 minmax 一起使用，以便自动为元素提供相同的宽度，当它们超过某些阈值时，它们会转到下一行。

问题是当我最多使用 1fr 时它工作正常。项目缩放并占据最大宽度。但问题是当我有少量物品（1或2）时。然后孩子们的宽度变大了。

因此，为了解决这个问题，我将最大值设置为设定的数量。但现在它们不再缩放并立即跳转到下一行。

.working{
  width: 100%;
  height: 5rem;
  margin-bottom: 3rem;

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

.not-working{
  width: 100%;
  height: 5rem;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 8rem));
  gap: 1rem;
}

.item{
  background-color: red;
}

<div class='working'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<div class='not-working'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Answer 1

是auto-fill 还是auto 是您所期望的？

.working {
  width: 100%;
  height: 5rem;
  margin-bottom: 3rem;
  justify-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, auto));
  gap: 1rem;
}

.item {
  background-color: red;
  min-width:min-content;
}
.not.working {

  grid-template-columns: repeat(auto-fit, minmax(5rem, auto));
}

<div class='working'>
  <div class='item'>plap plap plap plap</div>
  <div class='item'>plip plip</div>
  <div class='item'>plop plop plop plop plop plop plop plop plop plop</div>
  <div class='item'>.</div>
</div>

<div class='not working'>
  <div class='item'>plap plap plap plap</div>
  <div class='item'>plip plip</div>
  <div class='item'>plop plop plop plop plop plop plop plop plop plop</div>
  <div class='item'>.</div>
</div>