用 CSS Grid 实现两栏布局，grid-template-columns: 280px 1fr 是最简稳写法：左侧固定宽容纳头像与联系信息，右侧 1fr 自适应撑满剩余空间，需配合 min-height: 100vh 防塌缩，并用 <aside> 语义化标记侧边栏。
用 CSS Grid 实现两栏布局，grid-template-columns 是关键
HTML 简历加侧边栏，本质是「主内容 + 侧边信息」的视觉分离，不是靠 float 或绝对定位硬凑。现代写法直接用 display: grid，在 body 或最外层容器上定义两列即可。
常见错误是把侧边栏塞进 header 或用 position: fixed，结果打印 PDF 时错位、响应式下消失、语义混乱。
-
grid-template-columns: 280px 1fr：左侧固定宽（头像、联系方式、技能标签常用），右侧自适应撑满剩余空间 - 必须给外层容器设
min-height: 100vh，否则侧边栏高度可能塌缩 - 如果侧边栏内容少，右侧内容长，建议对侧边栏加
align-self: start防止它被拉伸变形
aside 标签不是装饰，得用对语义和可访问性
很多人随手写 <div class="sidebar">，但 HTML5 明确推荐用 <aside> 包裹侧边栏内容——它不只是样式容器，更是告诉屏幕阅读器“这部分是辅助性、非主线的信息”。
不加 role="complementary" 或没配 aria-label，会影响残障用户浏览体验；搜索引擎也可能弱化这部分权重。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏里放头像、邮箱、GitHub 链接、技能图标，就用
<aside aria-label="联系与技能"> - 避免在
<aside>里塞工作经历或项目描述——那些属于主线内容，该进<main> - 如果侧边栏要响应式隐藏（比如手机端），用
@media (max-width: 768px)控制display，别用visibility: hidden，否则仍会被读屏软件读到
侧边栏里的图片、图标、链接怎么排整齐？flex 比 text-align 可靠
侧边栏常见元素：圆形头像、社交图标组、技能标签云。用 text-align: center 或 margin: auto 很难精准控制垂直居中和间距，尤其跨浏览器渲染不一致。
正确做法是对每个子区块单独启用 Flexbox：
- 头像区域：
display: flex; justify-content: center; align-items: center;，再套个border-radius: 50% - 联系项列表（邮箱、电话、LinkedIn）：
display: flex; flex-direction: column; gap: 8px;，每项内用display: inline-flex; align-items: center; gap: 6px;对齐图标和文字 - 技能标签：
display: flex; flex-wrap: wrap; gap: 6px;，每个<span>设flex-shrink: 0防止换行截断文字
打印成 PDF 时侧边栏跑偏？检查 @page 和容器 overflow
用 Chrome/Firefox「打印为 PDF」时，侧边栏被截掉、或整页错位，大概率是两个原因：页面尺寸声明冲突，或外层容器溢出未处理。
html-resume 类模板默认用 Letter 尺寸，改 A4 后若没同步调整网格列宽，280px 的侧边栏在 210mm 宽的 A4 上就容易撑破。
- 确认
@page { size: a4 portrait; margin: 0; }已写在style.css开头 - 把侧边栏最大宽度限制死：
aside { max-width: 260px; }，避免字体放大或缩放导致溢出 - 外层
grid容器加overflow-x: hidden，防止横向滚动条干扰打印裁切 - 测试前先在浏览器「打印预览」里看是否整页完整，别等导出 PDF 才发现缺角
侧边栏真正的难点不在布局，而在内容取舍：什么该放进去，什么必须留在主区。放太多，破坏信息层级；放太少，又浪费了视觉锚点。留白和克制比堆砌更重要。
