使用@media将两列Grid布局转为单列布局失败求助

常见问题排查与解决方法 #

• 媒体查询位置错误：CSS遵循“后定义覆盖先定义”规则，必须把移动端的@media查询代码放在原Grid布局样式的后面，否则会被原样式覆盖。
• 选择器优先级不匹配：如果原Grid容器用了.grid-container这类类选择器，媒体查询里必须使用相同（或更高优先级）的选择器，不能用更低优先级的选择器（比如标签选择器）。
• 属性修改不正确：不需要复杂操作，直接修改grid-template-columns即可实现单列，以下是完整示例：

示例代码

HTML：

<div class="grid-container">
  <div class="grid-item">内容区块1</div>
  <div class="grid-item">内容区块2</div>
</div>

CSS：

/* 桌面端两列布局 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding: 0 1rem;
}

/* 移动端单列布局（必须放在桌面样式之后） */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr; /* 直接设置为单列 */
  }
  
  /* 如果原项目设置了grid-column: span 2这类属性，需要重置 */
  .grid-item {
    grid-column: span 1;
  }
}

额外注意点 #

• 如果选择用display: block替代Grid，记得给子元素添加margin-bottom来替代Grid的gap（因为block布局不支持gap属性）。
• 检查是否有其他CSS规则（比如!important标记）干扰了媒体查询的样式，可以通过浏览器开发者工具（F12）查看元素的样式优先级，确认移动端样式是否被正确应用。

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