I'm currently working on creating a simple gallery. My goal is to achieve the following design:
https://i.sstatic.net/jq8pe.jpg
However, the result I'm getting looks like this: https://i.sstatic.net/hSZyj.png
The issue I'm facing is that there is too much space between the images, and I'm struggling to find a solution. I realize it's because of the justify-content: space-between; property, but I'm wondering if there is a different option that can reduce the space between the images?
Html
<div class="photoContainer>
<div class="ant-image">
...
</div>
</div>
Css
.photosContainer {
width: 80%;
height: 100%;
overflow: auto;
overflow-x: hidden;
display: flex;
align-content: space-between;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.ant-image {
height: fit-content;
flex-shrink: 0;
position: relative;
display: inline-block;
width: 200px;
}