我試圖透過網格模板區域實現元素排列，但它不起作用。我正在嘗試使用網格系統垂直和水平排列塊。使用左側的圖片和另一側的文字。為什麼這段程式碼不起作用？
1
387.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
當您使用
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; }