为什么我的网格布局在手机上显示成单列了？

夏侯巧玲提问于 2026-02-16 12:15:23 阅读 45

移动

我用CSS Grid做了两列布局，但手机上看的时候变成了单列，明明设置了minmax(250px, 1fr)，应该能保持两列才对啊。

代码是这样写的：


<div class="container">
  <div class="item">左侧栏</div>
  <div class="item">主要内容</div>
</div>

对应的CSS：


.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 我想保留两列但缩小间距 */
  }
}

我试过把媒体查询里的grid-template-columns改回repeat(2, 1fr)，但手机横屏时左右间距会变得很大，这是哪里出问题了？

我来解答赞 5 收藏

反馈

2 条解答

爱学习的梓涵 Lv1

问题在于你的媒体查询断点设在了768px，但你的列最小宽度是250px，两列就需要至少500px的空间。768px以下变成单列是浏览器在自动适配，因为实在挤不下两列了。

你想保留两列的话，有几个解决办法：

第一个办法是把断点改小，比如改成480px，这样在手机竖屏（通常360-428px）时变单列，但在平板或手机横屏（500px+）时保持两列：

@media (max-width: 480px) {

  .container {

    grid-template-columns: 1fr;

  }

}

第二个办法是缩小最小宽度，比如改成200px，这样两列只需要400px，768px断点就够用了：

.container {

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

至于你试的 repeat(2, 1fr) 在横屏时间距大的问题，可以在媒体查询里加个 max-width 限制列的宽度：

@media (max-width: 768px) {

  .container {

    grid-template-columns: repeat(2, 1fr);

  }

  .item {

    max-width: 200px; /* 限制单列最大宽度 */

  }

}

或者更简单点，用 minmax(120px, 1fr) 替代250px，这样大部分手机横屏都能保持两列，同时间距也不会太大。

我比较推荐第一种方法，改断点是最直接的。

2026-03-12 13:13

启腾 Lv1

你遇到的问题其实挺常见的，主要是因为 auto-fit 和 minmax 的行为在不同屏幕宽度下的表现导致的。我们一步步来分析和解决这个问题。

首先你要明白，repeat(auto-fit, minmax(250px, 1fr)) 的作用是让网格自动适应容器的宽度。如果屏幕宽度不足以放下两个 250px 的列，那么它会把多余的列折叠成单列。这是 auto-fit 的默认行为。

其次，你的媒体查询里写了 grid-template-columns: 1fr;，这直接强制布局变成单列了。即使你改回 repeat(2, 1fr)，由于手机屏幕宽度有限，两列之间的间距可能会显得很大，视觉上也不够理想。

要解决这个问题，我们需要调整一下布局逻辑，确保在小屏幕上也能保持两列，并且间距不会过大。下面是具体步骤和代码：

第一步，去掉媒体查询里的 grid-template-columns: 1fr;，换成更灵活的定义。我们可以用 minmax 来限制每一列的最小宽度，同时允许它们根据屏幕宽度自适应。

第二步，在小屏幕上通过调整 gap 的值来优化间距，避免两列之间显得过于松散。

修改后的代码如下：



.container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 默认两列布局 */

  gap: 20px; /* 默认间距 */

}



@media (max-width: 768px) {

  .container {

    gap: 10px; /* 在小屏幕上缩小间距 */

  }

}

这样做的原理是：在大屏幕上，minmax(250px, 1fr) 确保每列至少有 250px 宽，同时可以扩展以填满剩余空间；在小屏幕上，我们通过减小 gap 的值，让两列之间的间距变得更紧凑，视觉上就不会显得奇怪了。

如果你发现某些极端情况下（比如特别窄的屏幕）还是会出现问题，可以进一步优化，给 grid-template-columns 加一个最大列数的限制。例如：



.container {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(250px, calc(50% - 10px))); /* 每列最多占一半宽度 */

  gap: 20px;

}



@media (max-width: 768px) {

  .container {

    gap: 10px;

  }

}

这里的关键是 calc(50% - 10px)，它确保每列最多占屏幕宽度的一半，减去间距的一半，从而避免列宽超出屏幕范围。

最后提醒一点，测试的时候记得用真实的设备或者浏览器的开发者工具模拟各种屏幕尺寸，这样才能确保效果符合预期。希望这些调整能帮到你！

2026-02-16 13:08