У меня есть макет сетки CSS, и я хотел бы, чтобы один из элементов сетки занимал две строки.
Обычно я делал бы это с помощью свойства grid-row: span 2 или с использованием именованной сеткиПлощади.
В этом примере, несмотря на наличие места для .news-item-5, чтобы также охватить строку ниже (и эффективно занять пространство, выделенное для .news-item-7), я не могу заставить это работать.
Разве в этом макете сетки невозможно иметь .news-item-5, охватывающий две строки?
Так же как и включенные фрагменты, у меня есть кодовая ручка: https://codepen.io/emilychews/pen/GzpBmO
Любая помощь будет потрясающей.
/* ---- GRID */
.second-grid-wrapper {
display: grid;
grid-gap: 1rem;
grid-template-columns: 2fr 2fr 1fr;
grid-template-areas:
"news-1 news-2 news-3"
"news-1 news-4 news-5"
"news-6 news-4 news-5";
}
.news-item-1 {grid-area: news-1}
.news-item-4 {grid-area: news-4}
/* .news-item-5 {grid-area: news-5} */
.news-item-7 {
background: #fff;
}
.news{
background: lightblue;
box-sizing: border-box
}
<section class="second-grid-wrapper">
<article class="news news-item-1">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 1</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-2">
<div class="top-news-item-text-wrapper">
<h3 class="news-item-heading td">A SMALLER HEADLINE - 2</h3>
<a target="_blank" class="bottom-text td">Link</a>
</div>
</article>
<article class="news news-item-3">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline -3</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-4">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 4</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-5">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 5</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-6">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">SOMETHING ELSE - 6</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
<article class="news news-item-7">
<div class="top-news-item-text-wrapper">
<h2 class="news-item-heading td">This is a headline - 7</h2>
<p class="bottom-text td">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</article>
</section>