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。

蓝色框更喜欢环绕并保持最大百分比，直到 window 变得特别小。然而，红色方框将根据百分比调整其最大值的大小，直到达到 200px 断点。到目前为止，一切都很好。

我希望当视口达到 640px 时红色框会换行，即 200 * 3（对于三列），加上 2 * 20px 的间隙。但是请注意，当视口变小时，红色框根本不会环绕，而是溢出到 window 的隐藏部分。由于某些原因，第三个框仅在视口为 399 或更小时才会换行。

有谁知道为什么 CSS 网格会这样？以及我如何实现 30% 的最大宽度的列，它可以在没有任何溢出的情况下换行？

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

提前致谢。

Answer 1

将最大宽度设置为百分比在某种意义上否定了自动调整声明。虽然 fr 处理免费 space，但百分比是浏览器眼中的实际宽度。因此，当您将最大值设置为 30% 时，浏览器将在不换行的情况下遵守该设置，因为它始终可以将其具有的任何宽度拆分为 30% 的块。当然，这取决于您设置的最小 200 像素。

既然你不想在你的桌面渲染中使用 fr，我建议在你的内容开始不起作用的断点处插入一个媒体查询，并减少到一个占用所有空闲空间的列 space。示例：

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

Answer 2

不确定您是否仍在寻找答案，但是当您使用百分比时它会考虑可用的 space 但它不会考虑会导致溢出的网格间隙。一个快速解决这个问题的方法是添加一个 calc 函数来计算百分比并减去你的网格间隙。例如...

grid-template-columns: repeat(2, calc(50% - 10px));
grid-gap: 20px

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

Percentages in minmax CSS grid causing overflow

html

css

responsive-design

css-grid