说明书页面首选 grid-template-columns: 30% 70%，兼顾导航栏扫描效率与主内容区代码/表格可读性，打印友好、无障碍支持好；小屏须显式设为 1fr，避免双栏压缩；折叠菜单需用 max-height 动画并重置 details 默认间距。
直接用 display: grid 配 grid-template-columns，别碰 float、table 或绝对定位——说明书页面需要语义清晰、打印友好、小屏可读，这些方案要么破坏结构，要么响应式失效。
为什么 grid-template-columns: 30% 70% 是文档中心首选
说明书类页面天然有“导航侧边栏 + 主内容区”结构：左侧放目录、章节锚点、参数速查表；右侧放详细说明、代码块、截图。30%/70% 比例兼顾扫描效率与阅读宽度，且不依赖 JavaScript 或媒体查询就能生效。
-
30%左栏足够显示 5–8 个折叠/展开的章节标题，又不会挤占主文空间 -
70%右栏保证代码块（如<pre class="brush:php;toolbar:false;"></pre>）不换行、表格不横向滚动 - 所有子元素按源顺序流式渲染，打印时自动分页，无障碍工具能正确读出层级
- 不用写
min-height或 JS 补高——Grid 会自然拉齐两栏顶部对齐线
@media (max-width: 768px) 切单栏必须加 grid-template-columns: 1fr
小屏下双栏会强制压缩导致文字过小、按钮点击困难，但很多人只写了 display: block 或忘了重置列定义，结果左栏堆在右栏上方、间距错乱。
- 必须显式覆盖
grid-template-columns，只写display: grid不够——旧值仍生效 - 用
1fr而非100%：避免因父容器 padding 导致子项宽度计算偏差 - 如果左栏含折叠菜单，需额外加
max-height: 0+overflow: hidden动画，否则展开时会撑开右栏内容
左侧导航栏里嵌 <details><summary></summary></details> 的兼容性坑
想让说明书支持手风琴式章节折叠？<details></details> 语义强、无需 JS，但 Safari 15.4 之前不支持 open 属性动画，Chrome 对 summary 内边距渲染不一致。
立即学习“前端免费学习笔记（深入）”；
- 不要给
<summary></summary>设padding，改用line-height控制行高，防止点击区域偏移 - 折叠状态下的
<details></details>默认有margin-bottom: 1em，需重置为margin: 0避免空隙累积 - 若需支持 IE11，必须降级为
<button></button>+aria-expanded+ 手动切换max-height
真正难的不是布局本身，而是让左侧导航的锚点跳转不破坏右侧内容滚动位置——这得靠 scroll-margin-top 配合 :target 伪类，而不是指望 Grid 自己搞定。
