SASS设置Grid Template Areas不生效，无法实现预期两行网格布局

核心原因 #

你写的grid-template-areas属性被划掉，说明存在优先级更高的CSS规则覆盖了你的定义，最常见的场景是：

• 代码里存在针对小屏幕的响应式媒体查询，其中定义了单列布局的grid-template-areas规则，要么选择器优先级高于你写的桌面端规则，要么书写顺序在你的规则之后，导致全局/对应断点下覆盖了你的原有定义。
• 额外说明：你当前写的grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3"实际是「2行3列」布局（每行字符串内的命名数量对应列数），并非你预期的6列，这也是预期效果不匹配的原因之一。

修复方法 #

1. 定位覆盖规则 #

打开浏览器开发者工具，点击被划掉的grid-template-areas属性旁的来源链接，就能找到生效的覆盖规则。如果是媒体查询内的移动端样式，按以下方式调整即可：

• 如果你采用桌面端优先的写法，要把媒体查询（移动端适配）写在基础样式的后面，确保只有屏幕宽度小于阈值时才触发单列布局：

/* 桌面端基础样式 */
#about-a .about-info {
  display: grid;
  grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3";
  grid-template-columns: repeat(3, 1fr); /* 明确列宽，避免渲染异常 */
  grid-gap: 1.2rem;
}

/* 小于768px时用单列布局 */
@media (max-width: 767px) {
  #about-a .about-info {
    grid-template-areas:
      "bioimage"
      "bio"
      "aw1"
      "aw2"
      "aw3";
  }
}

2. 调整为预期的2行6列布局 #

如果需要实现2行6列的效果，修改grid-template-areas和grid-template-columns即可，示例如下：

#about-a .about-info {
  display: grid;
  /* 第一行前2份给bioimage，后4份给bio；第二行每2份对应一个奖项 */
  grid-template-areas: "bioimage bioimage bio bio bio bio"
                        "aw1 aw1 aw2 aw2 aw3 aw3";
  grid-template-columns: repeat(6, 1fr); /* 明确6等宽列 */
  grid-gap: 1.2rem;
}

其他grid-area相关的定义无需修改。

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