Simple grid design causing cls, Avoid major layout shifts cls - html

Question

I am trying to create a simple grid block with minimal css but it causes cls problem, The tags that are causing cumulative layout shift: h3, img, div, p, almost all of the block.
I tried to add more css to that tags but couldn't find a way to solve it.
First div is larger than other two divs and last two divs has same size
My codes are as follows:
.grid-section {
display: grid;
grid-template-columns: repeat(3, 48% 25% 25%);
grid-gap: 1%;
margin-bottom: 40px;
}
.grid-section img {
width: 100%;
margin-bottom: 20px;
}
.grid-section h3 {
margin-bottom: 5px;
}
.grid-section a {
display: inline-block;
padding-top: 10px;
color: #0067b8;
text-transform: uppercase;
font-weight: bold;
}
.grid-section a:hover i {
margin-left: 10px;
}
#media(max-width: 768px) {
.grid-section {
grid-template-columns: repeat(2, 1fr);
}
.grid-section :first-child {
grid-column: 1 / -1;
}
}
#media(max-width: 500px) {
.grid-section {
grid-template-columns: 1fr;
}
}
<section class="grid-section">
<div>
<img src="bvvvvvvvvvv/1.webp" class="img-fluid" alt="" width="100%" height="100%" />
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select
extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
<div>
<img src="bvvvvvvvvvv/1.webp" class="img-fluid" alt="" width="100%" height="100%" />
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select
extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
<div>
<img src="bvvvvvvvvvv/2.webp" class="img-fluid" alt="" width="100%" height="100%" />
<h3>The new Microsoft Edge</h3>
<p>
Expect more. World class performance, with more privacy, more
productivity, and more value.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</section>
Any help will be appreciated. Thanks

Answer 1

ok with your demo, I better see what you are looking for.
simplest solution would be to use background image for the div which contain the image and the text. This solution already needs more structure in your html, but if you want to go with "img" tag, html structure will be at least 2 times more complex.
look at the snippet and try it in mobile view.
.grid-section {
display: grid;
grid-template-columns: repeat(3, 48% 25% 25%);
grid-gap: 1%;
margin-bottom: 40px;
}
.grid-section>div {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
}
.grid-section .content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1em;
margin: 1em;
background-color: rgba(255, 255, 255, 0.5);
}
.grid-section h3 {}
.grid-section a {
display: inline-block;
padding-top: 10px;
color: #0067b8;
text-transform: uppercase;
font-weight: bold;
}
.grid-section a:hover i {
margin-left: 10px;
}
#media (max-width: 768px) {
.grid-section {
grid-template-columns: repeat(2, 1fr);
}
.grid-section :first-child {
grid-column: 1 / -1;
}
}
#media (max-width: 500px) {
.grid-section {
grid-template-columns: 1fr;
}
}
<section class="grid-section">
<div style="background-image: url('https://picsum.photos/id/20/800/600')">
<div class="content">
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</div>
<div style="background-image: url('https://picsum.photos/id/32/800/600')">
<div class="content">
<h3>Save $150 + free controller</h3>
<p>
Buy an Xbox One X console and double your fun with a free select extra controller. Starting at $349.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</div>
<div style="background-image: url('https://picsum.photos/id/43/800/600')">
<div class="content">
<h3>The new Microsoft Edge</h3>
<p>
Expect more. World class performance, with more privacy, more productivity, and more value.
</p>
Learn More <i class="fas fa-chevron-right"></i>
</div>
</div>
</section>