本文介绍如何使用 css grid 替代 flexbox，实现容器内所有图片在任意视口下保持等宽、等高（1:1）、且宽度始终约束在 90–200px 区间内，同时 100% 利用可用宽度。
在响应式图像布局中，仅依赖 flexbox 很难同时满足「等宽」「尺寸有界」和「填满容器」三大条件——尤其当子项数量固定但容器宽度动态变化时（如 4 张图在 425px 宽度下发生换行错位），flex-grow 与 min/max-width 的组合常导致最后一项脱离统一尺寸逻辑。
此时，CSS Grid 是更精准、声明性更强的解决方案。其核心在于 grid-template-columns: repeat(auto-fit, minmax(90px, 1fr))：
- minmax(90px, 1fr)：每列最小 90px，最大为“均分剩余空间”的一份（即自动等分）；
- auto-fit：在可用空间内尽可能多地铺设符合尺寸约束的列，多余空间由各列均摊，从而天然保证所有项目等宽；
- 配合 grid-auto-rows: 1fr 和 aspect-ratio: 1 / 1，可确保高度与宽度严格一致，形成正方形响应式网格。
以下是完整、可直接运行的实现代码：
.pp-avatar-area {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
grid-auto-rows: 1fr;
gap: 0.5rem;
width: 75%;
max-width: 600px;
margin: 0.5rem 0;
padding: 0.5rem;
border: 1px solid #000;
border-radius: 0.25rem;
overflow-y: auto;
}
.pp-image-avatar-item {
aspect-ratio: 1 / 1;
border: 1px solid red;
border-radius: 0.25rem;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}✅ 关键优势说明：
- ✅ 所有图片始终等宽（无 Flexbox 中因换行导致的 flex-grow 失效问题）；
- ✅ 宽度严格落在 [90px, 200px] 区间：当容器足够宽（如 800px），4 张图将均分得约 187.5px（
- ✅ 无需设置 min-width/max-width 在子项上，Grid 父容器已通过 minmax() 全局控制；
- ✅ 支持任意数量子项（3 个、5 个或更多），行为一致可靠。
⚠️ 注意事项：
- aspect-ratio 是现代 CSS 核心特性（Chrome 88+/Firefox 89+/Safari 15.4+），若需兼容旧版 Safari（
- auto-fit 与 auto-fill 的区别：auto-fit 会折叠空轨道，使内容紧凑居中；auto-fill 则保留所有可能列轨道（含空），通常推荐 auto-fit；
- 若需强制单行显示（禁止换行），可改用 grid-auto-flow: column + 固定列数，但会牺牲响应式弹性。
综上，面对「等宽 + 尺寸区间 + 填充容器」的复合需求，CSS Grid 的 minmax() + auto-fit 组合提供了简洁、健壮、语义清晰的原生解法，应作为现代布局的首选方案。
