Why doesn't displaying the grid using a grid template area work?

Question

I'm trying to achieve element arrangement via grid template area but it doesn't work. I'm trying to use a grid system to arrange blocks vertically and horizontally. Use the picture on the left and the text on the other side. Why doesn't this code work?

.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

When you use grid-template-areas, you need to assign grid-area values ​​to elements within the grid.
In short, adding the following css code will achieve the desired result:

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