使用 grid-auto-rows 与 flex 可实现响应式图片缩略图布局。1. 通过 grid-auto-rows 设定统一行高，结合 auto-fit 实现列数自适应；2. 每个网格项启用 flex 布局，实现内容居中或叠加效果；3. 配合 object-fit: cover 和 overflow: hidden 确保图片裁剪一致；4. 利用伪元素 padding-bottom 维持宽高比，保证容器形状；5. 通过媒体查询调整小屏下的列宽与行高，优化显示与点击区域。该方案兼顾结构控制与内容对齐，适配多设备。
在CSS中制作响应式图片缩略图，结合 grid-auto-rows 与 flex 可以实现高度自适应、跨设备兼容的布局。核心思路是使用 CSS Grid 控制行高和自动排列，再利用 Flexbox 处理容器内部对齐或嵌套结构，使图片在不同屏幕尺寸下保持比例并均匀分布。
使用 grid-auto-rows 设置统一行高
通过 grid-auto-rows 可以设定网格容器中每一行的默认高度。这对缩略图尤其有用，能保证所有行具有相同视觉高度，即使内容不一致。
示例：.thumbnail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
grid-auto-rows: 100px; /* 所有行固定为100px高 */
gap: 10px;
}
.thumbnail-item {
overflow: hidden;
}
.thumbnail-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 图片裁剪以填满容器 */
}这样每张缩略图都会被限制在 100px 高的格子内，且列数根据容器宽度自动调整，适合响应式设计。
在Grid项中使用Flex增强内部布局
有时缩略图需要叠加文字、图标或居中对齐内容，此时可在每个网格项中启用 Flexbox 来优化内部元素排布。
立即学习“前端免费学习笔记（深入）”；
示例：图片居中 + 文字覆盖.thumbnail-item {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.thumbnail-item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0.3); /* 半透明遮罩 */
}
.thumbnail-item span {
position: relative;
color: white;
font-size: 14px;
z-index: 1;
}Flex 布局让文本或图标在图片上水平垂直居中，同时不影响 Grid 的整体结构。
响应式断点优化显示效果
虽然 auto-fit 能自动换行，但在小屏设备上可能显得太挤。可以加入媒体查询微调最小列宽或行高。
@media (max-width: 600px) {
.thumbnail-grid {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-auto-rows: 60px;
}
}这样在手机端每行能容纳更多小缩略图，同时保持可点击区域合理。
处理不同比例图片的一致性
原始图片尺寸不一容易导致布局错乱。除了 object-fit: cover，还可以用伪元素维持宽高比。
.thumbnail-item {
position: relative;
overflow: hidden;
}
.thumbnail-item::before {
content: '';
display: block;
padding-bottom: 100%; /* 创建1:1的占位空间 */
}
.thumbnail-item img {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
object-fit: cover;
}这种方法确保每个缩略图容器始终为正方形，不受父级 grid-auto-rows 影响，适配更复杂场景。
基本上就这些。grid-auto-rows 提供结构控制，flex 提供内容对齐灵活性，两者结合能高效构建现代响应式缩略图网格。不复杂但容易忽略细节，比如 object-fit 和 overflow 的配合。
