响应式CSS网格内插入的图片仅移动端正常、桌面端重叠怎么解决？

• 网格子元素.post和内部图片.postthumb都设置了固定宽度280px，而网格容器.posts的列规则为repeat(auto-fill, minmax(225px, 1fr))，桌面端容器宽度足够时会自动生成多列，单网格单元格宽度会小于280px，固定宽度的子元素溢出单元格边界就会出现互相重叠的问题。

将CSS代码按如下调整即可：

.posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  grid-auto-rows: auto;
  margin: 0 auto;
  max-width: 1000px;
  gap: 20px;
}

.posts * {
  box-sizing: border-box;
}

.post {
  font-family: montserrat;
  text-decoration: none;
  color: #000;
  margin: 2.5px 5px;
  width: 100%;
  max-width: 280px;
}

.postthumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin: 0;
}

.posttitle {}

1. 移除.post的固定宽度设置，改为width: 100%保证元素永远适配所在网格单元格的宽度，新增max-width: 280px控制元素最大宽度不超过原设计尺寸。
2. 移除.postthumb的固定宽度设置，改为width: 100%继承父容器宽度，新增object-fit: cover保证图片在固定高度下不会拉伸变形，若不需要固定高度可将height: 200px改为height: auto，图片会按原始比例自适应显示。
3. 为.posts新增margin: 0 auto属性，让整个网格容器在桌面端居中显示，视觉效果更协调。

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