CSS响应式图片画廊问题：屏幕缩至420px以下图片移出屏幕

问题原因 #

你的画廊在屏幕小于420px时出现图片被推出屏幕的情况，核心问题出在网格布局的宽度设置上：

• .archive-main里的grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))强制每列最小宽度为400px
• 再加上.img-box的左右padding各10px，每列实际最小占用宽度达到420px
• 当屏幕宽度小于420px时，网格列无法继续缩小，直接超出容器范围，导致图片溢出

解决方法 #

调整网格列的最小宽度为自适应值，同时优化间距设置避免额外宽度占用：

修改后的CSS代码 #

.archive-image{
  width:100%;     
  display: block;
  height: auto;
  border: #000000 solid 2px;
  box-sizing: border-box; /* 确保边框不额外增加宽度 */
}
.archive-main{
  box-shadow: 0 0 20px 0 rgba(72, 94,116, 0.7);
  border-top:goldenrod double 4px ;
  border-left:goldenrod double 4px ;
  border-right:goldenrod double 4px ;
  background-color: #00000035;
  background-image: linear-gradient(147deg, #000000a7 0%, #434343 74%);
  display: grid;
  /* 小屏幕时用屏幕宽度的90%作为列宽，大屏保持400px最小宽度 */
  grid-template-columns :repeat(auto-fit, minmax(min(90vw, 400px), 1fr));
  gap: 20px; /* 用grid间距替代img-box的padding，布局更简洁 */
  padding: 10px;
}
.img-box{
  /* 移除原有padding，改用grid的gap控制间距 */
}

关键改动说明 #

1. 自适应最小列宽：min(90vw, 400px)让列宽在小屏幕时自动适配屏幕宽度（取屏幕的90%），避免溢出；大屏时保持400px的最小列宽，保证布局美观。
2. 优化间距设置：用grid的gap属性替代.img-box的padding，既实现了图片间的间距，又不会额外增加列的宽度，避免触发溢出。
3. 盒模型优化：给.archive-image添加box-sizing: border-box，确保边框不会额外增加图片宽度，保证布局尺寸准确。

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