Ich versuche, die Elementanordnung über den Rastervorlagenbereich zu erreichen, aber es funktioniert nicht. Ich versuche, ein Rastersystem zu verwenden, um Blöcke vertikal und horizontal anzuordnen. Benutzen Sie das Bild links und den Text auf der anderen Seite. Warum funktioniert dieser Code nicht?
.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; }