Pourquoi l'affichage de la grille à l'aide d'une zone de modèle de grille ne fonctionne-t-il pas ?

Question

J'essaie d'implémenter la disposition des éléments via la zone de modèle de grille, mais cela ne fonctionne pas. J'essaie d'utiliser un système de grille pour disposer les blocs verticalement et horizontalement. Utilisez l’image de gauche et le texte de l’autre côté. Pourquoi ce code ne fonctionne-t-il pas ?

.news__wrapper {
  display: grid;
  grid-template-areas: "a a c" "b b c";
}

.news__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.news__item-image {
  width: 349px;
  height: 360px;
}

.news__item-image {
  background: "url(https://place-hold.it/300x500) 50% 50% no-repeat";
}

<div class="news__wrapper">
  <div class="news__item">
    <div class="news__item-image"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem ipsum
      </p>
    </div>
  </div>
  <div class="news__item">
    <div class="news__item-image" :style="imageNews1"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem
      </p>
    </div>
  </div>
  <div class="news__item">
    <div class="news__item-image" :style="imageNews1"></div>
    <div class="news__item-content">
      <h4 class="news__item-title">
        Lorem,
      </h4>
      <p class="news__item-text">
        Lorem ips
      </p>
    </div>
  </div>
</div>

https://codesandbox.io/s/blissful-bush-tngxm8?file=/src/styles.css

Answer 1

Lorsque vous utilisez grid-template-areas时，您需要将grid-area, les valeurs sont attribuées aux éléments de la grille.
En bref, l'ajout du code css suivant permettra d'obtenir le résultat souhaité :

.news__item:first-child {
  grid-area: a;
}
.news__item:nth-child(2) {
  grid-area: b;
}
.news__item:nth-child(3) {
  grid-area: c;
}