通过 grid-template-columns 和 grid-template-rows 设置行列比例，结合 fr、px、%、auto 单位及 minmax() 与 repeat() 函数可实现灵活布局；利用 grid-column、grid-row 控制子元素跨度，配合 justify-items、align-items 等属性精确对齐；通过 grid-auto-rows 处理隐式网格，使用 auto-fit/auto-fill 实现响应式自适应，从而高效构建复杂且现代的页面结构。
在使用 css Grid 布局时，控制行列比例和子元素的排列是实现灵活、响应式页面的关键。通过合理设置网格轨道大小和子项对齐方式，可以轻松构建复杂的布局结构。
定义行列比例：使用 grid-template-columns 和 grid-template-rows
通过 grid-template-columns 和 grid-template-rows 可以明确指定每列和每行的尺寸，从而控制行列比例。
常用单位包括：
- fr：弹性比例单位，表示剩余空间的分配比例
- px：固定像素值
- %：相对于容器的百分比
- auto：自动根据内容大小分配空间
例如，创建一个两列布局，左侧占 1/3，右侧占 2/3：
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: 1fr 2fr;
若希望某行高度为固定值，其余行均分剩余空间：
grid-template-rows: 100px 1fr 1fr;
使用 minmax() 和 repeat() 优化响应式比例
结合 repeat() 和 minmax() 能更高效地控制网格比例，尤其适合响应式设计。
比如创建一个至少 200px、最多 1fr 的等分布局：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
这会让容器根据可用空间自动调整列数，每列最小 200px，最大占据等分空间，实现自适应效果。
子元素布局控制：放置与对齐
Grid 子元素可通过以下属性精确控制位置和对齐方式。
使用 grid-column 和 grid-row 指定元素跨越的网格线：
grid-column: 1 / 3;
表示该元素从第 1 条竖线开始，跨到第 3 条竖线（即占两列）。
也可以使用 span 简化写法：
grid-row: span 2;
表示从当前位置向下跨 2 行。
对齐方面，容器可设置：
- justify-items：控制子项在列轴上的对齐（如 left, center, stretch）
- align-items：控制子项在行轴上的对齐（如 start, center, end）
- justify-content：当网格总大小小于容器时，控制整体在列方向的对齐
- align-content：控制多行网格在行方向的对齐
实用技巧：隐式网格与自动填充
当子元素超出显式定义的网格范围时，浏览器会自动创建隐式网格轨道。可通过 grid-auto-rows 或 grid-auto-columns 控制这些轨道的大小。
例如，确保所有自动创建的行高度一致：
grid-auto-rows: 100px;
配合 auto-fit 或 auto-fill 使用 repeat()，能实现更智能的布局填充行为。
基本上就这些。掌握行列比例定义和子元素定位方法后，CSS Grid 能应对大多数现代布局需求，既简洁又强大。关键在于理解 fr 单位、minmax 和网格线编号的逻辑关系。不复杂但容易忽略细节。