为何CSS Grid最后媒体查询中1fr未让Welcome元素占满全屏？

问题原因分析 #

你遇到的布局异常核心原因有两种可能：

1. 媒体查询触发条件未满足：若测试时屏幕宽度在960px-1400px之间，浏览器会优先应用1400px媒体查询的规则（main {grid-template-columns:1fr 1fr}），此时Welcome和About各占一列，Photos跨两列放在下方，就会出现你看到的“Welcome左、About右”的布局，而非960px媒体查询的单列效果。
2. 大屏样式未重置：若屏幕确实小于960px但布局仍异常，大概率是1400px媒体查询中给Photos面板设置的grid-column:span2等属性未被重置，这些属性会继承到小屏幕环境，虽不直接影响Welcome和About的排列，但可能导致视觉混淆。

解决方案 #

1. 确认触发条件：打开浏览器开发者工具（F12），通过“设备工具栏”确认当前视口宽度小于960px，确保960px媒体查询被触发。
2. 清除缓存：按Ctrl+F5强制刷新浏览器，加载最新的CSS文件。
3. 完善小屏幕样式：在960px媒体查询中重置Photos面板的网格属性，避免继承大屏样式：

@media screen and (max-width: 960px) {
  main {
    grid-template-columns: 1fr;
  }
  /* 重置Photos面板的大屏网格设置，恢复默认上下布局 */
  .panel.photos {
    grid-column: auto;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 3fr;
  }
}

修改后，当屏幕宽度小于960px时：

• Welcome面板会占满整行宽度
• About面板在Welcome下方，保持图片在上、文字在下的布局
• Photos面板在About下方，恢复文字在上、图片在下的默认布局

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