我有以下代码片段：
超文本：

<div class="textreview" id="newyorktimes">
  <span class="reviewer">New York Times</span>
  <span class="rating">NYT's Choice</span>
  <img class="reviewlogo" src="../images/logos/newyorktimeslogo.png" 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="../images/logos/baftalogo.png" alt="metacriticlogo">
</div>
<div class="textreview" id="oscars">
  <span class="reviewer">Academy Award</span>
  <span class="rating">Best Picture</span>
  <img class="reviewlogo" src="../images/logos/oscarslogo.png" alt="metacriticlogo">
</div>

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";
}

给出以下结果：

为什么这不把图像之间的标题和评级？