I was trying to make similar to this grid but which I had made its width are not flexible.
I used display:flex in .grid-Items but it changed the structure as compared to above figure. and same error flex-shrink showing. they are not working. so how to make structure like above figure grid?
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
}
.grid-item {
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 25px;
box-shadow: 5px 10px white;
padding: 20px;
margin: 20px;
} <div className="row5">
<div class="grid-container">
<div class="grid-item">
<img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" alt="searchdoctor" />
<span style=" font-weight: 700; font-size:36px;">
Search doctor
</span>
<br />
<span>
Choose your doctor from thousands <br /> of specialist, general,
and trusted <br /> hospitals.
</span>
</div>
<div class="grid-item">
<img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
<span style=" font-weight: 700; font-size:36px;">
Online pharmacy
</span>
<br />
<span>
Buy your medicines with our <br /> mobile application with a
simple <br /> delivery system.
</span>
</div>
<div class="grid-item">
<img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" /> <br />
<span style=" font-weight: 700; font-size:36px;">
Consultation
</span>
<br />
<span>
Free consultation with our trusted <br /> doctors and get the best
<br /> recomendations.
</span>
</div>
<div class="grid-item">
<img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
<span style=" font-weight: 700; font-size:36px;">
Details info
</span>
<br />
<span>
Free consultation with our trusted <br /> doctors and get the best
<br /> recomendations.
</span>
</div>
<div class="grid-item">
<img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
<span style=" font-weight: 700; font-size:36px;">
Emergency care
</span>
<br />
<span>
You can get 24/7 urgent care for<br /> yourself or your children and your<br />
lovely family.
</span>
</div>
<div class="grid-item">
<img src="https://i.postimg.cc/W3DmpTKH/searchddoctor.png" />
<span style=" font-weight: 700; font-size:36px;">
Tracking
</span>
<br />
<span>
Track and save your medical history<br/> and health data .
</span>
</div>
</div>
</div>