I’m am currently exploring clip-path. I’m having some trouble with a grid layout and disappearing image.

I have three images in a div called .gallery. I want them to:

• Display next to each other within their clip-path.
• Maintain a 10px spacing between them.
• Respond to screen size by shrinking proportionally but keeping their formation.

<div class="gallery">
<img SRC="explore.jpg">
<img SRC="connect1.jpg">
<img SRC="purchase.jpg">
</div>

.gallery {
display: grid;
gap: 10px;
box-sizing: border-box;
grid-template-columns: auto 0 auto;
place-items: center;
}

.gallery > img {
max-width: 100%;
aspect-ratio: 1;
object-fit: cover;
}

.gallery > img:nth-child(1) {
clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%);
}

.gallery > img:nth-child(2) { /* Clip-path for the middle image */
clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.gallery > img:nth-child(3) {
clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 610px) {
.gallery > img {
width: 100%;
}
.gallery {
grid-template-columns: auto auto auto;
}
}

The middle image disappears when using grid-template-columns: auto 0 auto; for responsiveness. I’ve tried changing it to auto auto auto in the media query, and although that does prevent the image from disappearing, the gap between the images is larger than 10px.

Can anyone point me in the right direction to fix the disappearing image and achieve the desired layout with consistent spacing?

grid-template-columns: auto 0 auto

grid-template-columns: auto auto auto