CSS-网格自动适应不工作时使用最小值最大值是特定的长度

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>