minmax CSS网格中导致溢出的百分比

Question

我正在尝试构建一个具有响应能力的CSS网格，该网格具有三列，必要时可以进行包装。我希望最小列宽为200px，否则请使用30％的百分比。

我相信我可以使用minmax CSS计算来执行此操作，但是当我使用百分比而不是像素时会发生一些奇怪的溢出错误。

.wrapper-pix {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 360px));
}

.wrapper-percent {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 30%));
}

.box-pix{
  background: #4299E1;
  height: 200px;
}

.box-percent{
  background: #F56565;
  height: 200px;
}

<div class="wrapper-pix">
  <div class="box-pix"></div>
  <div class="box-pix"></div>
  <div class="box-pix"></div>
</div>

<div class="wrapper-percent">
  <div class="box-percent"></div>
  <div class="box-percent"></div>
  <div class="box-percent"></div>
</div>

也请参见此CodePen：https://codepen.io/willjonty/pen/ExVpVza。

蓝色框喜欢包裹起来并保持最大比例，直到窗口变得特别小为止。但是，红色框将使用百分比调整其最大值的大小，直到达到200px断点。到目前为止，一切都很好。

我希望当视口达到640px时，红色框会自动换行，这是200 * 3（对于三列），加上2 * 20px的间距。但是请注意，当视口变小时，红色框根本不会包裹，而是溢出到窗口的隐藏部分。由于某些原因，仅当视口小于或等于399时，第三个框才会包裹。

有人知道为什么CSS网格的行为是这样的吗？以及我如何实现30％的列最大宽度，该宽度将包装而不会发生任何溢出？

我将使用fr单位，但这些单位会劫持自动调整以根据数据增加行中的列数。我想要3个大小相等的列。

谢谢你。

Answer 1

将最大宽度设置为百分比会在某种意义上否定自动调整声明。当fr处理可用空间时，百分比是浏览器实际的宽度。因此，当您将最大值设置为30％时，浏览器将不需换行就可以做到这一点，因为它始终可以将其具有的任何宽度拆分为30％的块。

由于您不想使用fr，因此建议您在断点处插入一个媒体查询，使您的内容开始无法工作，并减少到一列占用所有可用空间的列。示例：

@media only screen and (max-width: 640px) {
.wrapper-percent {
grid-template-columns: 1fr;
}
}