<ul>
<li>
<div class="thumb">
<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--nGVicUEP--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_350/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjxcgs7ogk65iswcjykt.png" alt="">
</div>
<div>
<h2>title</h2>
<h3>text text text text text text text text text text</h3>
</div>
</li>
<li>
<div class="thumb">img</div>
<div>
<h2>title</h2>
<h3>text text text text text text text text text text</h3>
</div>
</li>
<li>
<div class="thumb">img</div>
<div>
<h2>title</h2>
<h3>text text text text text text text text text text</h3>
</div>
</li>
<li>
<div class="thumb">img</div>
<div>
<h2>title</h2>
<h3>text text text text text text text text text text</h3>
</div>
</li>
</ul>
ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
width: 600px;
li {
border: 1px solid green;
.thumb {
aspect-ratio: 16/9; //292*164
background-color: green;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.