Grid布局与clip-path问题：中间图片消失及间距异常求助

• 中间图片消失原因：grid-template-columns: auto 0 auto将中间列宽度设为0，直接剥夺了中间图片的显示空间，导致其完全消失。
• 间距异常原因：媒体查询中使用auto auto auto时，Grid会根据图片内容自动分配列宽，再加上place-items: center让图片在列内居中而非拉伸填充，使得列宽大于图片实际占用宽度，视觉上的间距会超出设置的10px。

调整Grid布局规则，让三列等宽且图片填充列宽，同时保留clip-path的形状设计，确保间距和缩放比例符合需求：

.gallery {
  display: grid;
  gap: 10px; /* 保持10px固定间距 */
  box-sizing: border-box;
  grid-template-columns: repeat(3, 1fr); /* 三列等宽，自动适配容器宽度 */
  place-items: stretch; /* 让图片填充列宽，避免居中产生额外空白 */
}

.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: polygon(0 0, 100% 0, 50% 100%);
}

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

• 用repeat(3, 1fr)替代原有的列宽设置，让三列始终均分容器宽度，保证屏幕尺寸变化时图片按比例缩放、形态不变。
• 将place-items: center改为place-items: stretch，让图片完全填充列宽，消除列宽大于图片宽度导致的额外空白，确保间距严格为10px。
• 移除冗余的媒体查询，因为1fr的列宽会自动适配不同屏幕尺寸，无需额外设置。

内容的提问来源于stack exchange，提问作者Yehudis Freedman