如何通过媒体查询实现CSS Grid桌面3列转移动端1列布局

嘿，其实并没有“禁用Grid”的专属命令，但我们完全可以通过媒体查询覆盖Grid相关属性来实现你想要的响应式效果，而且这是更优雅的做法。下面直接给你调整后的代码和思路：

核心思路 #

在桌面端保持你原有的Grid布局，当屏幕宽度小于768px时，重新定义Grid的列数为1列，同时重置那些指定了grid-column的元素，让它们自动占满整行。

完整代码示例 #

/* 桌面端样式（默认，屏幕宽度≥768px） */
.history { 
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  padding: 1em; 
  grid-row-gap: 100px; 
} 

.box1 { 
  grid-column: 1/3; 
} 

.box2 { 
  grid-column: 3; 
  /* 你原来没写完的样式可以继续在这里补充 */
}

/* 移动端样式（屏幕宽度<768px） */
@media (max-width: 767px) {
  .history {
    /* 改为单列布局 */
    grid-template-columns: 1fr;
    /* 可选：调整移动端的行间距，更适配小屏幕 */
    grid-row-gap: 50px;
  }

  /* 重置指定了grid-column的元素，让它们自动占满整行 */
  .box1, .box2 {
    grid-column: auto;
  }
}

补充说明 #

• 为什么不用display: block？其实也可以把移动端的.history设置为display: block，但保留display: grid的话，你依然可以使用Grid的gap等便捷属性，不需要换成margin来控制间距，代码更统一。
• 媒体查询的断点767px是因为通常768px是平板的最小宽度，这样可以确保在手机屏幕上触发单列布局。
• 如果还有其他带grid-column/grid-row的元素，记得在媒体查询里一并重置为auto，避免出现元素错位的问题。

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