HTML Responsive Image Grid Gallery Space Between images

user_17636497 0
Viewed 170

I use the image gallery below. https://tympanus.net/Development/AnimatedResponsiveImageGrid/

I want to space between the two pictures.

If I put a div between the li and a elements, javascript will not find that a element. The height of the a elements inside the div 0.

I tried to modify CSS with padding, margin properties, but I was not successful. I used the background-size: containt, to position the images well.

css image html javascript
2 Answers

Add this background-size and remove or comment background-color: #333;

.ri-grid ul li a {
    ...
    background-size: calc(100% - 5px) !important;
    /* background-color: #333; */
    ...
}

enter image description here

user_82878390

add background-size: calc(100% - 10px); to .ri-grid ul li a element. 10px represent the space between each picture. You'll maybe need to change the background color of <li> and <a> to have a nice result.

user_83568560
Related