用 css grid 实现两列简历布局最稳妥，需区分 sidebar（联系信息等短条目）与 content（教育、工作等长文本），核心代码为 body { display: grid; grid-template-columns: 280px 1fr; gap: 40px; }，并配合 @media print 和 min-width 断点优化打印与移动端体验。
用 CSS Grid 快速实现两列简历布局
直接用 display: grid 是最稳妥、语义清晰的做法，兼容现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+），不需要浮动或绝对定位。关键在于把页面逻辑拆成「左侧固定栏」+「右侧内容区」，而不是强行分两列塞同等内容。
常见错误是给所有 <section></section> 都套相同 class，结果左右错位、响应式失效。实际应明确区分：
-
<aside class="sidebar"></aside>放联系方式、技能标签、语言、证书等短条目信息 -
<main class="content"></main>放教育经历、工作经历、项目描述等长文本块
对应 CSS 只需三行：
body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
}
其中 280px 是左侧宽度（足够放邮箱/电话图标+文字），1fr 让右侧自适应剩余空间；gap 避免紧贴边缘——这点常被忽略，导致打印时裁边。
Flexbox 方案在 Safari 旧版中更稳，但需注意 flex-shrink
如果必须支持 Safari 12–15（比如公司内网还在用 macOS Mojave），flex 比 grid 兼容性更好，但默认行为容易让左侧栏被压缩变形。
核心陷阱是没设 flex-shrink: 0：
- 不加这句，当窗口变窄时，
<aside></aside>会被强制压扁，图标和文字挤成一团 - 加了之后，左侧保持最小宽度，右侧自动换行或滚动
示例结构：
body {
display: flex;
}
.sidebar { flex: 0 0 280px; } /* 不放大、不缩小、基础宽280px */
.content { flex: 1; margin-left: 40px; }
注意：这里用 margin-left 替代 gap，因为旧版 Flex 不支持 gap。
打印 PDF 时两列错位？加 @media print 强制单列
浏览器「另存为 PDF」时，Grid/Flex 布局常因缩放、分页逻辑异常导致右侧内容被截断或跳页。这不是代码写错了，而是打印引擎对 CSS 布局的解析限制。
解决方式不是调 page-break-inside，而是直接切换为单列流式布局：
@media print {
body {
display: block;
}
.sidebar, .content {
width: 100%;
float: none;
}
.sidebar { margin-bottom: 24px; }
}
重点：display: block 覆盖原有 grid/flex，float: none 清除残留影响。很多开发者只改宽度，忘了重置 display，结果打印还是双栏错乱。
移动端要不要保留两列？别硬撑，用 min-width 切断点
手机屏宽普遍 ≤ 480px，硬塞两列只会让用户左右滑动，反而降低可读性。不要用 @media (max-width: ...) 去“隐藏左侧”，那会让关键联系信息丢失。
正确做法是用 min-width 控制两列只在够宽时生效：
@media (min-width: 768px) {
body {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
}
.sidebar { order: 1; }
.content { order: 2; }
}
这样在手机上自动回退到 HTML 默认文档流（先 sidebar 后 content），信息完整，阅读顺序也自然。额外加 order 是为了在小屏时把联系信息放在最前面——这是简历 UX 的基本要求，不是视觉偏好。
真正难的是内容密度控制：左侧别堆超过 7 行信息，否则小屏下会拉出很长空白；右侧每个 <section></section> 加 margin-bottom: 2rem 保证呼吸感。这些细节比布局本身更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
