mindmap
    id1[Grid 布局基础概念]
        id1-1[Grid 布局简介]
        id1-2[CSS Grid 布局定义与特点]
        id1-3[Grid 与 Flexbox 布局对比]
        id1-4[浏览器兼容性分析]
        id1-5[基本术语]
        id1-6[网格容器 Grid Container]
        id1-7[网格项目 Grid Item]
        id1-8[网格线 Grid Line]
        id1-9[网格轨道 Grid Track]
        id1-10[网格单元格 Grid Cell]
        id1-11[网格区域 Grid Area]

mindmap
    id2[Grid 容器属性]
        id2-1[定义网格结构]
        id2-2[display: grid 与 display: inline-grid]
        id2-3[grid-template-columns 属性详解]
        id2-4[grid-template-rows 属性详解]
        id2-5[grid-template-areas 属性应用]
        id2-6[网格间距控制]
        id2-7[grid-column-gap 属性]
        id2-8[grid-row-gap 属性]
        id2-9[grid-gap 简写属性]
        id2-10[自动布局算法]
        id2-11[grid-auto-columns 属性]
        id2-12[grid-auto-rows 属性]
        id2-13[grid-auto-flow 属性]
        id2-14[隐式网格与显式网格]
        id2-15[对齐方式]
        id2-16[justify-items 属性]
        id2-17[align-items 属性]
        id2-18[place-items 简写属性]
        id2-19[justify-content 属性]
        id2-20[align-content 属性]
        id2-21[place-content 简写属性]

mindmap
    id3[Grid 项目属性]
        id3-1[项目定位]
        id3-2[grid-column-start 属性]
        id3-3[grid-column-end 属性]
        id3-4[grid-row-start 属性]
        id3-5[grid-row-end 属性]
        id3-6[grid-column 简写属性]
        id3-7[grid-row 简写属性]
        id3-8[项目对齐]
        id3-9[justify-self 属性]
        id3-10[align-self 属性]
        id3-11[place-self 简写属性]
        id3-12[项目区域]
        id3-13[grid-area 属性]
        id3-14[命名网格区域应用]

mindmap
    id4[Grid 函数与单位]
        id4-1[常用函数]
        id4-2[repeat   函数详解]
        id4-3[minmax   函数应用]
        id4-4[fit-content   函数]
        id4-5[min-content 与 max-content]
        id4-6[长度单位]
        id4-7[fr 单位详解]
        id4-8[auto 关键字应用]
        id4-9[百分比单位使用]

mindmap
    id5[Grid 布局实战技巧]
        id5-1[响应式布局]
        id5-2[媒体查询与 Grid 结合]
        id5-3[自适应网格设计]
        id5-4[移动端优先策略]
        id5-5[复杂布局实现]
        id5-6[圣杯布局实现]
        id5-7[瀑布流布局]
        id5-8[卡片式布局]
        id5-9[杂志式布局]
        id5-10[性能优化]
        id5-11[网格层级优化]
        id5-12[渲染性能考虑]
        id5-13[浏览器重绘与重排]

mindmap
    id6[Grid 布局高级特性]
        id6-1[子网格特性]
        id6-2[subgrid 值应用]
        id6-3[嵌套网格布局]
        id6-4[浏览器支持情况]
        id6-5[动画与过渡]
        id6-6[Grid 属性动画支持]
        id6-7[过渡效果实现]
        id6-8[性能注意事项]
        id6-9[与其他布局方式结合]
        id6-10[Grid 与 Flexbox 混合使用]
        id6-11[Grid 与定位布局结合]
        id6-12[多列布局整合]

mindmap
    id7[Grid 工具与调试]
        id7-1[开发工具]
        id7-2[浏览器开发者工具使用]
        id7-3[Grid 布局可视化调试]
        id7-4[常见问题排查]
        id7-5[辅助工具]
        id7-6[Grid 生成器工具]
        id7-7[在线布局设计工具]
        id7-8[代码片段库]

mindmap
    id8[Grid 最佳实践]
        id8-1[代码组织]
        id8-2[命名规范建议]
        id8-3[可维护性考虑]
        id8-4[团队协作规范]
        id8-5[可访问性]
        id8-6[屏幕阅读器兼容]
        id8-7[键盘导航支持]
        id8-8[语义化结构保持]
        id8-9[渐进增强]
        id8-10[降级方案设计]
        id8-11[功能检测实现]
        id8-12[优雅降级策略]