使用 css 使画廊响应

Question

I am trying to build simple gallery. What I would like to achieve is this:

However, what I am actually achieving is this:

There is basically too much space between images and I can't find a way how to solve it. I understand that is because of justify-content: space-between; but perhaps there's another option that will put less 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;

}

Answer 1

With the space-between rule you cannot have the control of the space between the images. My suggestion is to:

• make the image gallery container smaller because you have a small number of photos
• to have more control over the images you can use also for the single image a % width as you have done for the container.

hint: use property object-fit for the single images

Answer 2

you can use grid display instead of flex and solve your problem:

.photosContainer{
       display:grid;
       grid-template-columns:repeat(4 , 1fr);
                }