我正在尝试构建一个响应式CSS网格，其中包含三列，必要时会换行。我希望最小列宽为 200px，否则使用 30% 的百分比。
我相信我可以使用minmaxCSS计算来执行此操作，但是当我使用百分比而不是像素时，会出现一些奇怪的溢出错误。
.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>另请参阅此代码笔：https://codepen.io/willjonty/pen/ExVpVza。
蓝色框更喜欢换行并保持其最大百分比，直到窗口变得特别小。但是，红色框将使用百分比调整其最大值的大小，直到它们到达 200px 断点。到目前为止，这一切都很好。
我希望当视口达到 640px 时，红色框会换行，即 200 * 3(对于三列(，加上 2 * 20px 的间隙。但请注意，当视口变小时，红色框根本不换行，而是溢出到窗口的隐藏部分。出于某种原因，第三个框仅在视口为 399 或更小时换行。
有谁知道为什么CSS网格会这样？以及我如何实现 30% 的列最大宽度，该列将包装而没有任何溢出？
我会使用fr单位，但这些单位会劫持自动调整以根据数据增加一行中的列数。我想要 3 个大小相等的列。
提前谢谢你。
不确定您是否仍在寻找答案，但是当您使用百分比时，它会考虑可用空间，但它没有考虑会导致溢出的网格间隙。对此的快速解决方案是添加一个计算函数，该函数执行百分比并减去网格间隙。例如。。。
grid-template-columns: repeat(2, calc(50% - 10px));
grid-gap: 20px
将最大宽度设置为百分比在某种意义上否定了自动调整声明。虽然 fr 处理可用空间，但百分比是浏览器眼中的实际宽度。因此，当您将最大值设置为 30% 时，浏览器将遵循它而不进行换行，因为它始终可以将任何宽度拆分为 30% 的块。当然，这取决于您设置的最小 200px。
由于您不想在桌面渲染中使用 fr，因此我建议您在内容开始不起作用的断点处插入媒体查询，并减少到占用所有可用空间的一列。例：
@media only screen and (max-width: 640px) {
.wrapper-percent {
grid-template-columns: 1fr;
}
}