本文档始于2025.11.24 晚上23:59，该睡觉啦，写完笔记就去睡
CSS Grid 基础与实践
1.核心概念
grid是一个二维的布局方式
更适合页面级宏观骨架，复杂的二维结构
容器与轨道 (Grid Container & Tracks)
与 Flexbox 类似，Grid 布局也需要一个父容器和子项目。
网格容器 (Grid Container): 声明 display: grid; 或 display: inline-grid; 的父元素。
网格项目 (Grid Item): 网格容器的直接子元素。
网格线 (Grid Line): 组成网格的水平和垂直分割线。
网格轨道 (Grid Track): 两条相邻网格线之间的空间，即行 (Row) 和列 (Column)。
网格单元 (Grid Cell): 一个网格行和网格列的交叉区域。
网格区域 (Grid Area): 由多个网格单元组成的矩形区域（这是 Grid 最强大的特性之一）。
主轴的交叉轴
2.解决了什么问题
能极为轻松的处理掉flex较难实现的多行布局，更倾向于页面级布局
让复杂布局更加简化，曾经需要使用多个div和float position的布局轻松几行代码即可实现
响应式设计，更加简便的方法就能创建响应式布局，适应不同的页面尺寸
元素对其，有强大的对齐功能，无需使用内外边距，更加清晰易懂
精准行列控制，可以自定义是固定还是弹性，超方便，超灵活grid-template-areas是最令我惊叹的部分，使用简单的文字叙述就极速布好局，真的很不可思议
极大的提高了代码的可读性和维护性，并且使用了这个之后就完全不用管html部分的代码顺序啦
3.代码示例
大部分代码都在../../study_by_myself/grid
请自行查看
fr单位很重要，他是grid实现弹性和响应式的基础
e.g.:grid-template-columns:200px 1fr 2fr
4.注意事项/常见误区
一定要记得激活grid布局
项目堆叠，明显的将每个grid-row和grid-column指定出来
跨度不生效，详细的写出grid-column/row-start/end
5.相关链接
6.本次学习总结
是一个小时急速学完的结果，虽然有些地方还是不理解但是会认真的在后续查看文档完善知识点的
第二次使用gemini学习，体验依旧很好，棒！
因为学习的比较快所以会有知识点吸收不好的缺点，学到的属性越来越多有时候就很容易忘掉，要多多使用锻炼！