1. 场景与问题描述
1.1 跨行跨列的常见场景
在一个网格布局中，子元素有时需要跨越多行与多列显示完整内容。此时如果网格的行高或列宽设置为固定值，内容会被剪裁，导致文本无法完整呈现。
例如一个卡片标题需要跨两列呈现，但若网格行高过低，行高不足，就会看到文本被截断。
1.2 表现形式与用户体验
截断通常表现为文本换行受限、溢出样式缺失，视觉密度下降，影响可读性与信息传达。
在跨列的单元格中，若区域高度受限，竖直方向的文本也可能无法完整显示，这是用户体验的重要考量点。
2. 原因解析
2.1 行高固定导致截断
若 grid-template-rows 使用固定像素值，跨行项的内容容易因行高不足而溢出，从而呈现剪裁效果。
grid-auto-rows: 100px; 将所有行设为同一高度，当内容超出时，若未启用溢出处理，文本将被裁剪。自适应能力不足是关键原因之一。
2.2 列宽受限与跨列影响
grid-template-columns 如果设为固定宽度或分配不足的比例，跨列的单元格可能挤压相邻轨道，导致内容无法完整显示。
在跨列场景中，列的最小宽度与单位分配会直接影响文本的换行与可读性。
3. 实操方法：通过调整 grid-template-rows 和 grid-template-columns
3.1 设定最小高度实现行自适应
使用 minmax 可以让行高在保持基本高度的同时，允许内容向上扩展，避免截断。
.grid {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-template-rows: repeat(3, minmax(80px, auto));gap: 12px;
}3.2 结合 grid-auto-rows 与 minmax 的组合
把 grid-auto-rows 设置为 minmax(60px, auto)，当遇到跨行跨列的项时，跟随内容高度自动伸展，避免截断。
.grid {display: grid;grid-template-columns: repeat(4, 1fr);grid-auto-rows: minmax(60px, auto);gap: 12px;
}3.3 使用 minmax(0, 1fr) 防止列过窄
为列宽设置 minmax(0, 1fr) 可以防止列在分配剩余空间时被压缩到不可见的宽度，从而避免跨列项内容被截断。
.grid {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));grid-auto-rows: minmax(80px, auto);
}4. 进阶技巧与坑点
4.1 使用 grid-auto-flow 与布局密度
开启 dense 模式可以让跨行跨列的空白处被填充，提升网格利用率，但要注意文本重排后可能出现意外的顺序。
4.2 溢出处理策略
当内容本身较长时，可以设定 overflow: hidden、text-overflow: ellipsis 等策略，但应综合考虑可访问性与可读性，避免过度隐藏信息。
