移动端Grid布局右侧内边距异常问题求解

数据老陈

2026-7-14

问题分析与解决方案

你的右侧内边距异常问题，本质是Grid布局在小屏设备上的溢出导致横向滚动，进而让父容器的右侧padding看起来“消失”。

问题根源

你给.cardContainer设置的默认grid-template-columns: repeat(auto-fill, minmax(364px, 1fr))，会强制卡片最小宽度为364px。当移动端屏幕宽度小于364px + gap + 父容器左右padding时，卡片总宽度会超出父容器的可用宽度，触发横向滚动，视觉上右侧的16px padding就被挤出可视区域了。

修复方案

调整Grid的响应式逻辑，让小屏设备自动适配1列布局，同时保留大屏的固定宽度卡片和桌面端4列效果：

.cardContainer {
  display: grid;
  /* 小屏设备自动填充，卡片宽度自适应容器 */
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 2rem;
  width: 100%;
  background-color: pink;

  /* 当屏幕宽度足够容纳364px卡片时，切换到固定最小宽度布局 */
  @media (min-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(364px, 1fr));
  }

  /* 桌面端固定4列 */
  @media (min-width: 1200px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  min-height: 522px;
  box-sizing: border-box;
  border: 1px solid $color-neutral-30;
  background-color: $color-neutral-10;
  border-radius: 24px;
  padding: 16px;
  width: 100%;
}