grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 可实现信息块自动堆叠：浏览器按容器宽度动态计算最多容纳几列（每列≥320px），放不下时自动退为单列；需配合父容器width: 100%、子项不设固定宽、图片和文本防撑破等控制，避免换列失效。
用 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) 让信息块自动堆叠
信息块（如头像、基础资料、账户设置、安全中心等）默认应横向排列，但小屏下必须自然退为单列——这不是靠媒体查询“强行切”，而是让 Grid 自动判断。关键就这一行：grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))。
它告诉浏览器：每块至少占 320px 宽（略宽于 iPhone 屏），最多均分剩余空间；放不下两块时，自动缩成一列。不用写 @media，也不用管具体有几个信息块。
-
auto-fit比auto-fill更合适：它会合并空轨道，避免小屏下出现看不见的空白列或意外横向滚动 - 父容器必须有明确宽度上下文，比如设
width: 100%或max-width: 1200px，否则minmax()无法计算 - 别把信息块写死
width: 33.333%或flex-basis: 300px，那会和 Grid 冲突，反而卡住换列逻辑
信息块内部内容不撑破列宽的关键控制
堆叠失败最常见的原因是某块内部元素“太硬”：比如头像图没设 max-width: 100%，或者资料列表用了 white-space: nowrap，导致整块宽度被锁死，Grid 就没法把它塞进 320px 里。
- 所有图片加
width: 100%; height: auto;，必要时补object-fit: cover; - 文本类区域（如昵称、简介）设
min-width: 0;和word-break: break-word;，防止长单词/邮箱/URL 撑开容器 - 避免在信息块上直接设
display: inline-block或float，它们会脱离 Grid 的尺寸管理
需要手动干预的三个典型场景
Grid 能自动堆叠，但有些结构变化它无能为力，必须加媒体查询兜底：
- 头像从右侧移到顶部：桌面端用
grid-template-areas: "info avatar"，移动端改"avatar" "info" - 操作按钮组（如“编辑”“注销”）在小屏下需垂直堆叠且居中：单独给按钮容器加
flex-direction: column; align-items: center; - 某些信息块（如“隐私设置”）在手机上应隐藏，只留入口链接：用
@media (max-width: 480px) { .privacy-section { display: none; } }
Flexbox 方案仅用于兼容 IE11 或高度不一致的信息块
如果项目必须支持 IE11，或信息块高度差异极大（比如有的带长表格，有的只有两行文字），Grid 的等高行为反而会让布局难看，此时改用 Flexbox 更可控。
- 父容器设
display: flex; flex-wrap: wrap; - 每个信息块设
flex: 0 0 calc(50% - 16px);（两列）+margin: 0 8px 16px; - 小屏断点里统一设
flex: 0 0 100%; margin: 0 0 16px;，确保强制单列 - 注意：IE11 不支持
gap，必须用margin控制间距，且要处理最后一行多余 margin
实际开发中最容易被忽略的，是信息块之间的视觉节奏。自动堆叠解决了排列，但没解决“哪块该更醒目”。这时候别动布局代码，去调 padding、border-bottom 或加 box-shadow——这些微调比改 Grid 列数更能提升可读性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
