Grid布局实现文章目录分区技巧

• 固定菜单 + 自适应内容：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 更可控
• 高亮当前激活项？直接给对应 加 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 决定，干净又灵活。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~