CSS Grid响应式堆叠后，如何让第二个div占满整行宽度

问题核心是堆叠状态下，你没有正确重置网格元素的列跨度或调整容器的列定义，导致第二个元素仍沿用原有的span 1规则。以下是两种直接有效的解决方法：

方法1：修改网格容器的列定义（推荐） #

在媒体查询中将网格容器切换为单列布局，所有元素会自动占满整行宽度：

/* 桌面端初始布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5列对应4+1的跨度分配 */
  gap: 1rem;
}

.item-1 {
  grid-column: span 4;
}

.item-2 {
  grid-column: span 1;
}

/* 响应式堆叠布局 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* 切换为单列 */
  }
}

方法2：强制重置元素的网格列跨度 #

如果不想修改容器列定义，直接让两个元素横跨所有列：

@media (max-width: 768px) {
  .item-1, .item-2 {
    grid-column: 1 / -1; /* 从第1列延伸到最后一列，占满整行 */
  }
}

你之前的方法无效的原因 #

• width:100%在CSS Grid中优先级低于grid-column属性，元素宽度由网格轨道决定，单独设置width不会覆盖网格布局规则。
• 若媒体查询的断点设置错误、选择器优先级不足，或类名匹配错误，规则无法生效。检查断点是否匹配窗口缩小后的尺寸，确保选择器能精准选中目标元素。

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