I'm attempting to develop a photo gallery that emulates the style of (using the Unsplash API -> )
However, the size of the container box does not adjust properly with the photos.
https://i.sstatic.net/1PAQF.jpg
<div className="imageGrid__container">
<div className="imageGrid__column">
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
</div>
<div className="imageGrid__column">>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
</div>
<div className="imageGrid__column">
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
<div className="imageGrid__item">
<img
className="imageGrid__itemImage"
src=""
/>
</div>
</div>
</div>CSS File :
.imageGrid__container {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 30px;
padding-left: 100px;
padding-right: 100px;
}
.imageGrid__item {
margin-bottom: 20px;
border: 1px solid red;
width: 100%;
}
.imageGrid__itemImage {
width: 100%;
background-size: cover;
background-position: center center;
object-fit: contain;
background-repeat: no-repeat;
}
Can you pinpoint where I may have gone wrong?
Pardon the language used.
I've experimented with different approaches, but the issue persists.