CSS - 使用 minmax 且 max 为特定长度时，网格自动适应不起作用

问题描述

我有一个要使用网格的项目。我找到了一种非常简单的方法来在 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,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>

解决方法

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