CSS Grid BentoBox UI特定断点（768px-926px）列宽异常求助

我用CSS Grid实现了BentoBox UI布局，多数场景运行正常，但在768px至926px的断点区间出现问题：通过grid-template-columns动态添加列适配可用空间时，此区间内呈现异常两列布局——第一列宽度超过定义的400px最小值，第二列异常狭窄。请问是否存在合理修复方案，还是需要扩大移动端媒体查询范围覆盖该区间？

当前代码 #

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}
.grid-wrapper {
    width: 100%;
    max-width: 100%;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    grid-auto-rows: 400px;
    grid-auto-flow: dense;
}
.grid-item {
    padding: 50px;
    text-align: center;
    background-color: #eee;
    border: 1px solid red;
    grid-row: span 1;
    grid-column: span 1;
}
@media (min-width: 768px) {
    .grid-item-1x2 {
        grid-column: span 2;
    }
    .grid-item-2x1 {
        grid-row: span 2;
    }
    .grid-item-2x2 {
        grid-row: span 2;
        grid-column: span 2;
    }
}

已尝试的方法 #

• 修改minmax函数的参数值
• 使用其他列定义属性（如grid-template-columns的不同写法）
• 咨询AI工具未解决问题

修复方案 #

方案1：针对临界区间强制单列布局 #

在768px-926px区间单独设置单列，避免容器宽度处于临界值时的布局挤压：

@media (min-width: 768px) and (max-width: 926px) {
  .grid-wrapper {
    grid-template-columns: 1fr;
  }
}

该方案适合需要在中等屏幕下保持单列展示的设计需求，彻底规避临界宽度的布局异常。

方案2：替换auto-fill为auto-fit优化弹性布局 #

auto-fit会在空间不足时自动折叠列，比auto-fill更适配弹性布局场景，可缓解临界宽度下的列挤压问题：

.grid-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

同时可配合调整minmax的最小值（如改为350px），让列在中等屏幕下更易适配。

方案3：延后跨列效果的断点 #

将跨列类的启用断点延后到927px，确保容器宽度足够容纳两列400px的列+gap，避免跨列导致的布局异常：

@media (min-width: 927px) {
    .grid-item-1x2 {
        grid-column: span 2;
    }
    .grid-item-2x1 {
        grid-row: span 2;
    }
    .grid-item-2x2 {
        grid-row: span 2;
        grid-column: span 2;
    }
}

该方案适合希望跨列效果仅在足够宽的屏幕上生效的场景，保证布局逻辑的一致性。

内容的提问来源于stack exchange，提问作者Ramiz Afzal