為什麼使用網格模板區域顯示網格不起作用？

Question

我試圖透過網格模板區域實現元素排列，但它不起作用。我正在嘗試使用網格系統垂直和水平排列塊。使用左側的圖片和另一側的文字。為什麼這段程式碼不起作用？

.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

當您使用grid-template-areas時，您需要將grid-area值指派給網格內的元素。
簡而言之，加入以下 css 程式碼將達到預期的結果：

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