Grid网格布局实现文章目录布局怎么做_利用grid-template-columns让菜单分区-css教程-PHP中文网

Grid网格布局实现文章目录布局怎么做_利用grid-template-columns让菜单分区

P粉602998670

发布： 2025-12-18 15:01:50

原创

548人浏览过

CSS Grid实现文章目录布局的核心是用grid-template-columns划分功能区：容器设为display: grid，通过列宽比例（如240px 1fr）、grid-template-areas命名区域、嵌套grid对齐目录项，并用媒体查询调整列结构实现响应式。

grid网格布局实现文章目录布局怎么做_利用grid-template-columns让菜单分区

用 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 微调对齐方式：

Pixelfox AI

多功能AI图像编辑工具

2075

查看详情

用 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 决定，干净又灵活。

以上就是Grid网格布局实现文章目录布局怎么做_利用grid-template-columns让菜单分区的详细内容，更多请关注php中文网其它相关文章！