Справка по макету сетки и пути обрезки (исчезающее среднее изображение) ⇐ CSS

[Anonymous]

Сейчас я изучаю clip-path. У меня возникли проблемы с сеткой и исчезновением изображения.
У меня есть три изображения в блоке div с именем .gallery. Я хочу, чтобы они:

• Отображались рядом друг с другом в рамках пути обрезки.
• Сохранял расстояние в 10 пикселей между их.
• Реагируйте на размер экрана, пропорционально уменьшаясь, но сохраняя их форму.

Код: Выделить всё

.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;
}
}

Код: Выделить всё

[img]https://dummyimage.com/600x400/000/fff&text=one[/img]
[img]https://dummyimage.com/600x400/000/fff&text=two[/img]
[img]https://dummyimage.com/600x400/000/fff&text=three[/img]

Среднее изображение исчезает при использовании столбцов сетки-шаблона: auto 0 auto ; за отзывчивость. Я попытался изменить его на auto auto auto в медиа-запросе, и хотя это предотвращает исчезновение изображения, разрыв между изображениями превышает 10 пикселей.
Может ли кто-нибудь мне указать? в правильном направлении, чтобы исправить исчезающее изображение и добиться желаемого макета с постоянным интервалом?
grid-template-columns: auto 0 auto
< img alt="Изображение со стилямиgrid-template-columns: auto 0, автоматически применено" src="https://i.sstatic.net/4aidD8BL.png" />
grid-template-columns: auto auto auto



Подробнее здесь: https://stackoverflow.com/questions/784 ... ddle-image