用 CSS Grid 做简历布局更乱，是因为盲目全局应用 grid 而未约束列宽或结构；应仅对天然多列模块（如教育、技能）启用 Grid，其余用流式布局，并在打印和移动端做针对性降级与间距控制。
用 CSS Grid 做简历布局，为什么反而更乱？
直接套 display: grid 给整个 或 ，又没设 grid-template-areas 或列宽约束，浏览器会按内容自动撑开列——中文简历里一个长项目名或公司名就能把整行网格拉歪，打印时直接溢出右边界。
真正可控的做法是：只对「天然有列结构」的模块启用 Grid，比如技能分组、教育背景（学校｜专业｜时间）、证书列表。其他部分（如自我介绍、求职意向）仍用语义化块级流式布局。
- 给 Grid 容器加
max-width: 800px，避免在大屏上无限拉伸 - 列定义优先用
grid-template-columns: minmax(120px, max-content) 1fr，而非固定像素值 - 禁用
grid-auto-flow: column—— 简历是自上而下阅读，横向自动填充会打乱逻辑顺序 - 每行数据必须严格对应列数，
grid-column: span 2要慎用，尤其在打印预览中易导致错位
表格 vs Grid vs Flex：三者混用时最容易踩的坑
常见错误是：用 table 写技能栏，再套一层 div 加 display: flex 做响应式包裹，最后在外层 section 上加 display: grid 控制模块间距——三重布局逻辑叠加，CSS 优先级和盒模型计算全乱套，小屏下文字挤成一团，打印时表格被截断。
建议明确分工：
-
table：仅用于二维映射明确、需表头语义的列表（如「技能名称｜熟练度｜掌握时长」） -
flex：适合单行内元素对齐（如多个技能标签并排、联系方式图标+文字水平居中） -
grid：只用于多模块横向/纵向定位（如「左侧个人信息 + 右侧工作经历」双栏布局） - 三者不嵌套，模块之间用
margin或gap隔开，不靠布局模型“撑开”间距
打印 PDF 时网格列宽突然崩溃，怎么快速定位？
Chrome “另存为 PDF” 不渲染 grid-template-columns 中的 minmax() 和 fr 单位，会退化为等宽列或忽略定义，导致内容换行异常、日期被切到下一行。
导出前必须加的兜底规则：
- 在
@media print中，把所有grid容器降级为display: block，改用margin和width控制视觉对齐 - 对含
grid的模块，显式设置break-inside: avoid，防止单条经历被分页切断 - 禁用
grid-gap，改用padding或margin—— PDF 引擎对 gap 支持不稳定 - 检查是否用了
grid-area命名区域，命名在打印模式下基本失效，得靠class重新控制样式
移动端文字挤在一起，不是媒体查询没写，而是盒模型失控
很多人写了 @media (max-width: 768px)，但里面只调了 font-size，忘了 padding、border、gap 还在按桌面尺寸算——结果容器宽度被撑爆，文字被迫缩进或换行错乱。
关键修复点：
- 所有间距类属性（
padding、margin、gap）统一用rem或em，别混用px和% - 禁用
white-space: nowrap—— 简历里的地址、项目名必须允许断行 - 对 Grid 容器加
overflow-x: auto并设scrollbar-width: none，至少保证内容可横向滑动，不丢失 - 用
word-break: break-word替代break-all，避免中文单词中间硬切
真正难的不是写出整齐的网格，而是判断哪一段信息值得用网格、哪一段该老老实实让它自然流下来。表格不是布局工具，Grid 也不是万能胶——它们只在列关系明确、内容稳定、无需频繁增删行的场景里才真正省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
