CSS

Question

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

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

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

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

CSS - 网格 auto-fit 在使用最大为特定长度的 minmax 时不起作用

CSS - grid auto-fit not working when using minmax with max being specific length

minmax

css-grid