Mengapa memaparkan grid menggunakan kawasan templat grid tidak berfungsi?

Question

Saya cuba melaksanakan susunan elemen melalui kawasan templat grid tetapi ia tidak berfungsi. Saya cuba menggunakan sistem grid untuk menyusun blok secara menegak dan mendatar. Gunakan gambar di sebelah kiri dan teks di sebelah yang lain. Mengapa kod ini tidak berfungsi?

.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

Apabila anda menggunakan grid-template-areas时，您需要将grid-area nilai diberikan kepada elemen dalam grid.
Ringkasnya, menambah kod css berikut akan mencapai hasil yang diingini:

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