grid-template-columns 配合 minmax() 是核心解法：minmax(300px, 1fr) 保证列宽自适应且不小于300px，搭配 auto-fill 防布局跳动；需用 align-items: start 避免拉伸，gap 须媒体查询响应式调整，禁用 subgrid 保 Safari 兼容。
grid-template-columns 配合 minmax() 是核心解法
社交媒体墙的卡片尺寸不一，靠 float 或 flex 很难兼顾“等宽列数”和“单卡自适应宽度”。grid 的 minmax() 才是真正能响应式撑满容器又防止单卡过窄的手段。
常见错误是写成 grid-template-columns: repeat(auto-fill, 300px) —— 这会导致小屏下溢出或留白；或者用 fr 单位硬分列，失去卡片最小宽度控制。
-
minmax(300px, 1fr)表示：每列至少 300px，剩余空间平均分配，但不会压缩到小于 300px - 搭配
auto-fill而非auto-fit，避免空列塌缩导致布局跳动（尤其动态加载新卡片时） - 别忘了设
grid-gap（或gap），否则卡片紧贴，视觉拥挤且点击热区重叠
card 宽高比不一致时，避免 grid-row-start 干预自动流
有些卡片带长图、有些是纯文字，高度差异大。若手动给某张卡加 grid-row-start，会打断 grid-auto-flow: row 的自然排列，后续卡片可能错位、重叠，甚至在 Safari 中触发渲染异常。
真实场景中，后端返回的卡片数据结构不统一（比如有的含视频、有的只有标题），不能假设高度可控。强行统一高度（如 min-height: 200px）又会让短内容留大片空白。
- 让所有
.card保持默认grid-row: auto，由网格自动计算行跨度 - 用
align-items: start控制卡片顶部对齐，而非stretch（默认值），防止矮卡被拉伸变形 - 若需视觉节奏感，改用
padding-block或margin-block做纵向呼吸感，不碰网格定位
移动端小屏下 gap 太大？用媒体查询覆盖 gap 值
gap 在小屏上常显得过大，比如桌面设 gap: 16px，到了 iPhone SE 就占去近 1/4 屏宽，卡片可读区域严重缩水。直接删掉 gap 又会让卡片粘连，影响触控。
这不是设计妥协，而是响应式排版的基本适配逻辑：间距本身就得随视口缩放。
- 不要用
rem或em写死gap，它们不随屏幕物理宽度线性变化 - 优先用
px+ 媒体查询：@media (max-width: 480px) { .wall { gap: 8px; } } - 如果项目已用 CSS 自定义属性，可设
--gap: 16px，再在媒体查询里重设，方便全局调整
Safari 15.4 以下不支持 subgrid，别用它做卡片内部分栏
有人想在单张卡片内部用 display: grid + grid-template-rows: subgrid 对齐头像、时间、操作按钮——这在 Chrome/Firefox 没问题，但在旧版 Safari 会整个卡片渲染为空白，且控制台不报错。
这不是兼容性“建议”，而是线上事故高发点：iOS 用户占比高，而很多企业仍需支持 iOS 15.4（对应 Safari 15.4）及以下版本。
- 卡片内部布局回归
flex或常规grid（不用subgrid） - 若必须对齐多张卡的内部元素（如所有头像左对齐、所有时间右对齐），靠外层网格的
align-items和子元素margin-left: auto更稳妥 - 用
@supports (display: grid) and (grid-template-rows: subgrid)包裹 subgrid 代码，但别依赖它作为主逻辑
网格自动排列的“自动”二字，其实只对列数和基础流向有效；卡片内容高度、内部对齐、小屏间隙、老浏览器兜底——这些地方没捷径，得一层层按实际设备和数据来调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
