display:grid媒体查询失效：小屏无法切换为2列3行布局

核心问题点 #

你的代码存在两个关键问题导致媒体查询未按预期生效：

1. 媒体查询内的grid-template-rows仍设置为1fr 1fr，没有改成你需要的3行布局
2. 大概率缺少viewport meta标签，移动端浏览器会忽略媒体查询规则

修正步骤 #

1. 添加viewport元标签 #

在HTML的<head>中加入以下代码，确保浏览器正确识别屏幕宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 修正媒体查询的grid布局参数 #

调整媒体查询内的grid-template-rows为3行，同时优化小屏幕下的间距避免布局溢出：

.little_news {
  display: grid;
  margin: 1em;
  grid-template-columns: 10px 10px 10px;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 320px;
  justify-content: center;
  align-items: stretch;
  justify-items: center;
  align-content: center;
}

@media only screen and (max-width: 1200px) {
  .little_news {
    grid-template-columns: 10px 10px;
    grid-template-rows: 1fr 1fr 1fr; /* 改为3行 */
    grid-column-gap: 100px; /* 小屏幕缩小间距避免溢出 */
    /* 其他重复样式可省略，会继承原样式 */
  }
}

3. 确保媒体查询顺序正确 #

媒体查询必须写在原样式的后面，否则会被原样式的优先级覆盖。

额外优化建议 #

• 列宽使用相对单位（如1fr）代替固定10px，让布局更适配不同屏幕：

/* 桌面端 */
grid-template-columns: 1fr 1fr 1fr;
/* 小屏幕 */
grid-template-columns: 1fr 1fr;

• 使用gap属性代替grid-column-gap，语法更简洁：

gap: 0 320px; /* 行间距 列间距 */

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