В настоящее время я пытаюсь создать сетку с помощью HTML / CSS. У меня есть следующий код
<section class="home-d ">
<div class="container">
<h2 class="l-heading py-3">hot news</h2>
<div class="articles-container">
<!-- Article 1 -->
<article class="card">
<img src="./img/hot-news-img/post-1-img@1X(2).png" alt="" />
<div class="article-content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 2 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-2-img@1X(1).png" alt="" />
<div class="article-content">
<h3>Prophecy Hotel & Spa in Emirate</h3>
</div>
<!-- Article 3 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-3-img@1X(1).png" alt="" />
<div class="article-content">
<h3>Western Pyramid Resort in Egypt</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 4 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-4-img@1X(2).png" alt="" />
<div class="article-content">
<h3>Grand Meadows Resort in Maldives</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 5 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-5-img.png" alt="" />
<div class="article-content">
<h3>Wanderlust Resort in Tenerife</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 6 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-6-img@1X(1).png" alt="" />
<div class="article-content">
<h3>Twin Sanctuary Hotel in Great Britain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
<!-- Article 7 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-7-img@1X.png" alt="" />
<div class="article-content">
<h3>Prism Hotel in Ireland</h3>
</div>
<!-- Article 8 -->
</article>
<article class="card">
<img src="./img/hot-news-img/post-8-img@1X.png" alt="" />
<div class="article-content">
<h3>King's Shroud Resort in Spain</h3>
<p>
Amazing Gabion Ideas for Outdoors A Gabion is a cage box or
cylinder filled with rocks, concrete, or sometimes sand and soil
and It is a great way to decorate your outdoor. Amazing Gabion
Ideas for Outdoors A Gabion is a cage box or cylinder filled
with rocks, concrete, or sometimes sand and soil and It is a
great way to decorate your outdoor
</p>
</div>
</article>
</div>
</div>
</section>
CSS
.container {
max-width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.home-d {
text-align: center;
}
.home-d .articles-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
text-align: center;
align-items: center;
}
.home-d .articles-container>*:first-child,
.home-d .articles-container>*:first-child {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
align-items: center;
grid-column: 1 / span 2;
}
.home-d .articles-container>*:last-child {
grid-column: 2 / span 2;
}
.card{
border:1px solid #3333;
}
Вот ссылка https://jsfiddle.net/familagash/dfvhrxq5/. Это выглядит так при запуске кода. Но я хотел бы сделать так: введите описание изображения здесь
Я искал, однако не смог его найти. У него много примеров сеточных карт, но я не смог найти образец для этого. Кто может мне помочь?