Hey there! Creating a responsive 5x5 image grid is super straightforward with modern CSS—no need for heavy frameworks. Let me walk you through the approach and share a working example.

核心实现思路 #

• 容器基础设置: 用一个容器包裹所有图片，限制最大宽度并居中，避免在超大屏幕上过度拉伸，同时添加内边距保证内容和页面边缘的间距。
• CSS Grid 布局: Grid是处理行列布局的最佳选择，通过repeat(auto-fit, minmax())可以自动根据屏幕宽度调整列数，大屏幕保持5列，小屏幕自动收缩为更少列（甚至1列）。
• 图片自适应: 确保图片不会变形，用object-fit: cover维持比例，同时设置宽度100%让图片填满网格单元格。
• 间距优化: 用gap属性给图片之间添加均匀的间距，比传统的margin更简洁可控。

完整示例代码 #

HTML 结构 #

<div class="image-container">
  <!-- 重复25次图片标签，这里用占位图示例 -->
  <img src="https://picsum.photos/300/300?random=1" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=2" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=3" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=4" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=5" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=6" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=7" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=8" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=9" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=10" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=11" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=12" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=13" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=14" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=15" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=16" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=17" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=18" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=19" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=20" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=21" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=22" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=23" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=24" alt="示例图片">
  <img src="https://picsum.photos/300/300?random=25" alt="示例图片">
</div>

CSS 样式 #

/* 重置默认样式，避免浏览器差异 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.image-container {
  /* 设置Grid布局 */
  display: grid;
  /* 自动适配列数：最小宽度150px，剩余空间平均分配 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  /* 图片之间的间距 */
  gap: 1rem;
  /* 容器内边距 */
  padding: 1rem;
  /* 限制最大宽度，居中显示 */
  max-width: 1200px;
  margin: 0 auto;
}

.image-container img {
  /* 图片填满单元格宽度 */
  width: 100%;
  /* 设置固定高度，保证网格整齐 */
  height: 150px;
  /* 保持图片比例，裁剪多余部分 */
  object-fit: cover;
  /* 可选：添加圆角美化 */
  border-radius: 8px;
  /* 可选：鼠标悬停效果 */
  transition: transform 0.2s ease;
}

.image-container img:hover {
  transform: scale(1.05);
}

/* 可选：针对小屏幕的精细调整 */
@media (max-width: 600px) {
  .image-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
  }
  .image-container img {
    height: 100px;
  }
}

关键细节说明 #

• repeat(auto-fit, minmax(150px, 1fr)): 这是实现响应式的核心。auto-fit会自动根据容器宽度创建足够多的列，每列最小宽度150px，超过150px的部分平均分配（1fr），所以大屏幕上会自动排满5列，小屏幕则减少列数。
• object-fit: cover: 确保图片不会被拉伸变形，而是保持原有比例，裁剪超出单元格的部分，让图片始终填满单元格。
• 响应式适配：如果需要更精准的控制，可以通过媒体查询调整不同屏幕尺寸下的列宽、间距和图片高度。

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