如何创建具有自动填充、最小最大列宽度和左对齐列的 CSS 网格？答案

【问题标题】：How to create CSS grid with auto-fill, minmax col width, and left-aligned columns?如何创建具有自动填充、最小最大列宽度和左对齐列的 CSS 网格？
【发布时间】：2021-08-14 16:25:12
【问题描述】：

我正在尝试创建具有以下属性的 CSS 网格：

网格的宽度为 100%
列的宽度应为 330 像素，但如果这允许再容纳一列，则应缩小，但绝不应缩小到 288 像素以下。
所有列的宽度应相同
如果有剩余空间，则将列左对齐（所有剩余空间应位于网格的右侧）

这里有几个我正在努力实现的例子

Grid width => columns (width)
----------------------------

658px => |329px|329px|
         |329px|

660px => |330px|330px|
         |330px|

665px => |330px|330px|5px(whitespace)|
         |330px|

863px => |330px|330px|203px(whitespace)|
         |330px|

864px => |288px|288px|288px|

867px => |289px|289px|289px|

960px => |320px|320px|320px|

我尝试了以下三个选项：

方法 1

.grid {
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}

问题：列缩小到 288px，但它们可以增长到大于 330px Image with columns larger than the max width

方法 2

.grid {
  grid-template-columns: repeat(auto-fill, minmax(288px, 330px));
}

问题：列永远不会增长，并且列是左对齐的，但它们始终是 330 像素并且永远不会缩小到 288 像素。 Image with columns that don't shrink below the max width

方法 3

.grid {
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
}
.grid > div {
  max-width: 330px;
}

问题：列缩小到 288 像素，并且它们永远不会超过 330 像素，但它们不是左对齐的。 Image with columns that grow and shrink within boundaries, but are not left-aligned

如您所见，到目前为止，我尝试过的所有方法都没有奏效。他们都有不同的问题:(有没有办法让这个布局与 CSS Grid 一起工作？

【问题讨论】：

你想要达到的目标似乎有很多冲突的约束，repeat(auto-fill, minmax(288px, 330px)); 这几乎符合你上面提到的三个约束，但你说这不是你想要的，因为别的原因，我建议你修改你的问题。
@ZohirSalak minmax() 将始终默认为 max 所以 minmax(288px,330px) 只是 330px
@TemaniAfif 是的，但是操作没有提到其中一个约束中的收缩行为，除了当网格变成一列时minmax(288px, 330px) 做了它应该做的事情，我觉得问题是'不清楚最终结果
@ZohirSalak 每列的最小尺寸应为 288px，最大尺寸应为 330px --> 所以宽度在 288px 和 330px 的范围内。问题停止和前 4 行，其他一切都是 OP 尝试过的
嗨，如果问题不够清楚，我们深表歉意。我的目标是在屏幕上显示尽可能多的列，最小宽度为 288 像素。列不应缩小到 288 像素以下，也不能超过 330 像素。当允许显示附加列时，列应仅缩小到 330 像素以下。由于这些限制，可能会有空白。它应该始终位于所有网格的右侧（意味着它们之间不应有空格）。如上图repeat(auto-fill, minmax(288px, 330px)); 不起作用。列永远不会缩小到 330 像素以下。我将使用此信息更新问题。

标签： css css-grid

【解决方案1】：

这应该可以，只将它放在.wrapper 上 - 请注意，我在列 (.three) 上执行了强制和异常以显示其效果。我使用较小的值来适应这个结果执行窗口

.my-container {
  width: 100%;
  border: solid green 1px;
  padding: 3px;
}

.wrapper {
  border: solid cyan 1px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100px, 150px), 1fr));
  gap: 0.25rem;
}

.thing {
  border: solid 1px magenta;
}

.three {
  width: 40px;/* to show test of this */
  border: solid lime 1px;
}

<div class="my-container">
  <div class="wrapper">
    <div class="thing one">One comes before two but is a lonely number</div>
    <div class="thing two">Two burgers are more than one burger</div>
    <div class="thing three">Three</div>
    <div class="thing four">Four is the next block of super interesting content with more very happy text.</div>
    <div class="thing five">Five test of the test</div>
    <div class="thing six">Six</div>
    <div class="thing seven">Seven</div>
    <div class="thing ">Eight</div>
    <div class="thing ">More</div>
    <div class="thing ">And More</div>
    <div class="thing ">More so more</div>
    <div class="thing ">More again</div>
  </div>
</div>

【讨论】：