说明书页面首选 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% 右栏保证代码块（如
  ）不换行、表格不横向滚动
• 所有子元素按源顺序流式渲染，打印时自动分页，无障碍工具能正确读出层级
• 不用写 min-height 或 JS 补高——Grid 会自然拉齐两栏顶部对齐线

@media (max-width: 768px) 切单栏必须加 grid-template-columns: 1fr

小屏下双栏会强制压缩导致文字过小、按钮点击困难，但很多人只写了 display: block 或忘了重置列定义，结果左栏堆在右栏上方、间距错乱。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 必须显式覆盖 grid-template-columns，只写 display: grid 不够——旧值仍生效
• 用 1fr 而非 100%：避免因父容器 padding 导致子项宽度计算偏差
• 如果左栏含折叠菜单，需额外加 max-height: 0 + overflow: hidden 动画，否则展开时会撑开右栏内容

左侧导航栏里嵌

的兼容性坑

想让说明书支持手风琴式章节折叠？

语义强、无需 JS，但 Safari 15.4 之前不支持 open 属性动画，Chrome 对 summary 内边距渲染不一致。

• 不要给
  设 padding，改用 line-height 控制行高，防止点击区域偏移
• 折叠状态下的
  默认有 margin-bottom: 1em，需重置为 margin: 0 避免空隙累积
• 若需支持 IE11，必须降级为 + aria-expanded + 手动切换 max-height

真正难的不是布局本身，而是让左侧导航的锚点跳转不破坏右侧内容滚动位置——这得靠 scroll-margin-top 配合 :target 伪类，而不是指望 Grid 自己搞定。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！