为何CSS grid-template-areas未按预期调整元素排列顺序？

你编写的代码如下：

CSS代码 #

.textreview>.reviewer {
  grid-area: reviewer;
  text-align: center;
}

.textreview>.reviewlogo {
  grid-area: image;
}

.textreview>.rating {
  grid-area: rating;
}

.textreview {
  flex-basis: 250px;
  flex-shrink: 0;
  display: grid;
  row-gap: 10px;
  grid-template-areas: "reviewer" "image" "rating";
}

HTML代码 #

<div class="textreview" id="newyorktimes">
  <span class="reviewer">New York Times</span>
  <span class="rating">NYT's Choice</span>
  <img class="reviewlogo" src="http://placekitten.com/150/150" alt="metacriticlogo">
</div>
<div class="textreview" id="bafta">
  <span class="reviewer">BAFTA Awards</span>
  <span class="rating">Best Original Screenplay</span>
  <img class="reviewlogo" src="http://placekitten.com/150/150" alt="metacriticlogo">
</div>
<div class="textreview" id="oscars">
  <span class="reviewer">Academy Award</span>
  <span class="rating">Best Picture</span>
  <img class="reviewlogo" src="http://placekitten.com/150/150" alt="metacriticlogo">
</div>

问题原因排查 #

从代码逻辑上看，grid-template-areas的定义是正确的，理论上应该让reviewer（标题）在第一行、reviewlogo（图片）在第二行、rating（评分）在第三行。实际显示不符合预期，大概率是以下几种情况：

• CSS选择器未生效：检查是否有拼写错误，或者选择器优先级不够（比如存在其他ID选择器、内联样式覆盖了grid-area属性），导致元素没有被正确分配到指定的网格区域。
• 浏览器缓存旧样式：浏览器可能加载了之前的CSS缓存，没有应用最新的布局规则。可以通过强制刷新页面（Ctrl+F5）清空缓存测试。
• 其他CSS干扰：页面中可能存在其他全局样式或第三方样式，修改了网格项的grid-row/grid-column属性，或者改变了元素的display类型，导致grid-template-areas的布局被覆盖。

解决方案 #

如果排查后还是无法解决，可以换一种更直接的写法，跳过grid-template-areas，直接给每个元素指定所在的网格行：

.textreview>.reviewer {
  grid-row: 1; /* 指定在第1行 */
  text-align: center;
}

.textreview>.reviewlogo {
  grid-row: 2; /* 指定在第2行 */
}

.textreview>.rating {
  grid-row: 3; /* 指定在第3行 */
}

.textreview {
  flex-basis: 250px;
  flex-shrink: 0;
  display: grid;
  row-gap: 10px;
}

这种写法不需要依赖区域命名，直接指定元素的行位置，布局逻辑更直观，也能避免grid-template-areas可能出现的匹配问题。

内容的提问来源于stack exchange，提问作者Jord van Eldik