移动端相册用Grid实现响应式排版，核心是display: grid配合auto-fit+minmax(280px,1fr)自动调节列数，gap统一间距，图片用aspect-ratio与object-fit保持比例，单列时增大gap和标题字号提升可读性，跨格用grid-column/span配合grid-auto-rows控制。
移动端相册页面用 Grid 布局实现响应式排版，核心是让图片在小屏下自动转为单列、内容不挤压、图片不变形，且无需 JavaScript 或复杂断点。关键不在“写多少媒体查询”，而在用对 grid-template-columns 的自动计算能力。
用 auto-fit + minmax 实现自适应列数
直接在相册容器上设置：
- display: grid 是必须的第一步，没有它所有 grid 属性都不生效；
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 让每列至少 280px（适配 iPhone SE 屏宽减去边距），容器够宽就多列，不够就少列；
- gap: 12px 统一控制行列间距，避免在旧版 Safari 中因拆写 row-gap/column-gap 导致失效；
- 不用 auto-fill —— 它会渲染空列，影响语义和屏幕阅读器识别。
保证图片在不同格子中整齐不拉伸
每张图片或其容器需加约束，防止因文字、标题高度不一导致卡片变形：
- 给图片设 width: 100%; height: auto; object-fit: cover;，保持宽高比并填满；
- 更推荐用 aspect-ratio: 4/3（或 1/1）配合 object-fit，兼容性好，布局更稳定；
- 避免在卡片内写 height: 100%，容易塌陷；改用 min-height: 160px（根据内容基线调整）+ display: flex + flex-direction: column 控制内部对齐。
移动端单列时提升可读性与呼吸感
当屏幕窄到只容一列时，视觉节奏比列数更重要：
- 可选增大行间距：gap: 1.5rem（比桌面端略大），让卡片之间有足够留白；
- 图片下方标题建议用 font-size: 1.25rem; line-height: 1.4;，避免小屏文字糊成一团；
- 所有卡片用 margin-bottom: 0，完全依赖 gap 控制间距，规避外边距折叠问题。
进阶：局部跨格增强视觉层次
若想模拟杂志式马赛克效果（如首图跨两行），不需额外框架：
- 给特定图片容器加 grid-column: span 2; 或 grid-row: span 2;；
- 确保父容器已设 grid-auto-rows: 240px（固定行高），否则跨行后高度不可控；
- 跨格项仍受 gap 影响，无需额外调整 margin，布局天然对齐。
