grid-template-columns 流血到边缘但大小固定答案

【问题标题】：grid-template-columns that bleed to the edge but are clamped in sizegrid-template-columns 流血到边缘但大小固定
【发布时间】：2021-11-08 16:31:55
【问题描述】：

我想知道是否可以创建一个具有可变且未知数量的单元格的网格，这样：

每个单元格的大小介于 MINIMUM 和 MAXIMUM 大小之间（比如说 200px 和 500px）并且
单元格始终扩展到容器边缘

https://codesandbox.io/s/grid-auto-fit-jqp7w

如果你这样做

    gridTemplateColumns: `repeat(auto-fit, minmax(200px, 1fr))`,

单元格将始终正确填满容器边缘，但如果您只有一个单元格，它可能会非常大。

如果你这样做

  gridTemplateColumns: `repeat(auto-fit, minmax(200px, 500px))`,

网格单元将环绕而不是减小它们的大小以适应

【问题讨论】：

澄清：想知道这是否可以仅在 CSS 中实现。或许可以用 Javascript 解决这个问题。
单元格总是扩展到容器的边缘 这正是您的第一个示例所做的。请详细说明想要的结果。
自动填充而不是自动调整

标签： css css-grid

【解决方案1】：

我不知道如何使用minmax 中的固定宽度来实现您想要的效果，例如 200 像素和 500 像素。但一个接近的选择是使用auto-fill。它保持响应能力，但不允许单个孩子在屏幕很大时占据其父级的整个宽度。

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 5px;
  margin: 5px;
}

.cell {
  background-color: grey;
  padding: 1rem;
}

.single {
  background-color: green;
}

<div class="grid">
  <div class="single cell">single cell</div>
</div>

<div class="grid">
  <div class="cell">cell</div>
  <div class="cell">cell</div>
  <div class="cell">cell</div>
</div>

【讨论】：