网格布局和剪辑路径帮助（中间图像消失）

Question

我目前正在探索剪辑路径。我在网格布局和图像消失方面遇到了一些麻烦。

我在名为 .gallery 的 div 中有三张图像。我希望他们：

• 在剪辑路径中彼此相邻显示。
• 它们之间保持 10px 的间距。
• 通过按比例缩小但保持其形状来响应屏幕尺寸。

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

<div class="gallery">
  <img SRC="https://dummyimage.com/600x400/000/fff&text=one">
  <img SRC="https://dummyimage.com/600x400/000/fff&text=two">
  <img SRC="https://dummyimage.com/600x400/000/fff&text=three">
</div>

使用 grid-template-columns: auto 0 auto 时中间图像消失；为了响应能力。我尝试在媒体查询中将其更改为 auto auto auto ，虽然这确实可以防止图像消失，但图像之间的间隙大于 10px。

任何人都可以指出正确的方向来修复消失的图像并以一致的间距实现所需的布局吗？

网格模板列：自动 0 自动

网格模板列：自动自动自动

Answer 1

我会像下面这样做，建议您阅读我的文章：https://css-tricks.com/css-grid-and-custom-shapes-part-3/

.gallery {
  --s: 100px; /* control the clip-path and the size of the middle image */ 

  display: flex;
  gap: 10px; /* the gap */
  height: 200px; /* the image height */
}

.gallery > img {
  min-width: 0;
  object-fit: cover;
}

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

.gallery > img:nth-child(2) {
  clip-path: polygon(0 0,100% 0,50% 100%);
  width: calc(2*var(--s));
  margin-inline: calc(-1*var(--s));
}

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

<div class="gallery">
  <img src="https://dummyimage.com/600x400/000/fff&text=one">
  <img src="https://dummyimage.com/600x400/000/fff&text=two">
  <img src="https://dummyimage.com/600x400/000/fff&text=three">
</div>