我试图通过网格模板区域实现元素排列，但它不起作用。我正在尝试使用网格系统垂直和水平排列块。使用左侧的图片和另一侧的文字。为什么这段代码不起作用？
.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; }