code 标签需嵌套在 pre 中才能正常参与网格布局，因 pre 是块级容器且保留空白符，而 code 仅为内联语义标签；须设 pre{white-space:pre-wrap;max-width:100%;overflow-x:auto;margin:0;font-family:ui-monospace,monospace}。
code 标签本身不参与网格布局控制，它只是内联元素，直接塞进 grid 容器里会默认被拉伸、换行错乱、上下文丢失 —— 想让它在多列网格中正常显示，关键不是“怎么给 code 加 grid”，而是「怎么包裹它、限制它、隔离它」。
为什么 code 直接放 grid 项里会崩
浏览器把 code 当作内联文本处理：它没有块级尺寸上下文，grid-column 或 gap 对它无效；若父项没设 white-space: pre-wrap 或 overflow-x: auto，长代码会撑破列宽、破坏网格流；更糟的是，某些字体（如等宽字体未显式声明）会让字符宽度不一致，导致对齐漂移。
必须用 pre + code 组合包裹
单用 code 不足以保真，必须嵌套在 pre 中才能保留换行、空格和原始缩进。这是语义与行为的双重约定：
-
pre是块级容器，能响应grid的轨道分配 -
pre默认white-space: pre，但建议显式写成white-space: pre-wrap，避免窄屏下横向滚动丢失 -
code放在pre内部，仅负责语义标记（“这是代码”），样式由 CSS 统一控制
网格项中控制代码块宽度与溢出
即使用了 pre + code，在响应式网格里仍需主动约束尺寸，否则小屏下单个代码块就占满整列、挤走其他内容：
- 给
pre设max-width: 100%和overflow-x: auto，确保横向可滚动而非换行错位 - 禁用
pre的默认margin（不同 UA 差异大），统一重置为margin: 0 - 等宽字体必须显式声明：
font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace - 别依赖
code { display: block }—— 它会让code变成块级，但失去内联语义，且无法继承pre的空白处理逻辑
避免在 details + summary 里直接放 pre 块
如果代码块放在 details 展开区，常见翻车点是：展开瞬间高度塌陷、滚动条跳动、gap 失效。根本原因是 details 切换 open 时触发重排，而 pre 高度依赖内容渲染完成。
立即学习“前端免费学习笔记（深入）”；
- 给
details的直接子容器（比如div）设display: grid，而不是给details自身加 -
pre外层加一个带min-height: 16rem的 wrapper，防止刚展开时高度为 0 导致网格项坍缩 - 避免在
summary里写pre或code—— 它是display: list-item，强行嵌套会破坏伪元素和点击区域
pre 才是那个该进网格的块，code 只是它的内容标签。 
