Grid卡片布局单列模式显示异常问题求助

架构老林

2026-7-27

Grid布局单列显示变形的排查与修复方案

检查单列媒体查询的Grid列配置
确认移动端（单列）模式下，Grid容器的grid-template-columns是否设置为1fr，避免固定宽度或不合理的列宽规则导致溢出。示例代码：
```
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
    grid-auto-columns: unset; /* 移除自动列宽的强制限制 */
  }
}
```
修正卡片元素的盒模型与宽度限制
卡片内部元素若存在padding/margin未被包含在宽度内，或设置了固定min-width，会导致单列时超出容器。给卡片添加盒模型统一设置：
```
.card {
  box-sizing: border-box;
  width: 100%;
  min-width: unset; /* 取消可能的最小宽度限制 */
}
```
调整Grid容器的对齐与间距规则
单列模式下，若容器设置了justify-content: space-between等分散对齐属性，可能导致卡片错位。改为贴合容器的对齐方式：
```
@media (max-width: 768px) {
  .card-grid {
    justify-content: start;
    gap: 1rem; /* 合理调整间距，避免过大间距挤压布局 */
  }
}
```
清除卡片内部的浮动或异常定位
若卡片内有浮动元素未清除，或绝对定位元素超出容器范围，会引发布局变形。添加清除浮动的样式：
```
.card::after {
  content: "";
  display: table;
  clear: both;
}
```