I am currently working on mapping an array into image sources to create an image gallery. The issue I am facing is that it only maps down one column, and I am unsure how to make it fill the other columns as well. Any suggestions or tips would be greatly appreciated!
Here is the current output:
https://i.sstatic.net/YrTQE.png
My goal is to achieve this layout:
[123]
Below is the code snippet I am using:
<div className="image-grid">
<SRLWrapper options={options}>
{data.home.galleryImage.map((image, index, caption) => (
<div className="image-item" key={`${index}-cl`}>
<img src={`http:XXX${image.url}`} alt="" class="galleryimg"/>
<div class="imgoverlay">
<div class="imgtext">zoomie</div>
</div>
</div>
))
}
</SRLWrapper>
</div>
Here is the related CSS code:
.image-grid {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
column-gap: 2rem;
}
.image-item {
position: relative;
width: 100%;
display: block;
margin-bottom: 2rem;
}