CSS Grid实现文章目录布局的核心是用grid-template-columns划分功能区：容器设为display: grid，通过列宽比例（如240px 1fr）、grid-template-areas命名区域、嵌套grid对齐目录项，并用媒体查询调整列结构实现响应式。
用 CSS Grid 实现文章目录布局，核心是用 grid-template-columns 划分左右（或上下）功能区：一边放导航菜单，一边放正文内容。关键不是堆砌属性，而是理清“谁是容器、谁是分区、内容如何对齐”。
把容器设为 grid，并定义列宽比例
给包裹目录和正文的外层容器（比如 <article class="toc-layout"></article>）设置 display: grid，再用 grid-template-columns 指定菜单和内容的宽度关系：
-
固定菜单 + 自适应内容：
grid-template-columns: 240px 1fr;—— 左侧菜单宽 240px，右侧自动占满剩余空间 -
等宽双栏：
grid-template-columns: 1fr 1fr;—— 适合对比型目录（如“大纲 / 详情”） -
响应式三栏（含折叠菜单）：
grid-template-columns: minmax(0, 1fr) 3fr 1fr;—— 中间主内容最宽，左右为辅助区（如标签+目录）
用 grid-area 或显式网格线命名区域，提升可维护性
比起靠顺序猜位置，给区域起名更直观。配合 grid-template-areas 使用：
.toc-layout {
display: grid;
grid-template-areas:
"nav main"
"nav aside";
grid-template-columns: 260px 1fr;
grid-template-rows: 1fr auto;
}然后让子元素通过 grid-area: nav、grid-area: main 等直接归位。这样 HTML 结构可以自由调整，样式逻辑依然清晰。
菜单内部也用 grid 做垂直/层级对齐
目录项（如 h2、h3 标题链接）本身也可用 grid 微调对齐方式：
- 用
grid-template-columns: 32px 1fr;实现「图标 + 文字」左对齐，图标列固定不随文字换行错位 - 嵌套小目录（如二级标题）时，加
margin-inline-start: 1rem或用grid-column: 2控制缩进，比纯 padding 更可控 - 高亮当前激活项？直接给对应
<a></a>加background: #f5f5f7; border-left: 3px solid #007bff;即可，无需额外 wrapper
响应式断点只需改 columns，不用重写结构
在小屏下收起菜单是常见需求。只需媒体查询中修改列定义：
@media (max-width: 768px) {
.toc-layout {
grid-template-columns: 1fr; /* 菜单和内容叠成一列 */
}
.toc-nav { order: 2; } /* 让菜单沉到底部，保持阅读流自然 */
.toc-main { order: 1; }
}不需要新增 DOM、不依赖 JS 切换类名，CSS Grid 天然支持这种流式重组。
基本上就这些。Grid 不是用来炫技的，而是让“分区意图”在代码里一眼可见。菜单要不要固定、缩进怎么算、小屏怎么收——全由 grid-template-columns 和几行 grid-area 决定，干净又灵活。
