通过 grid-auto-rows 与 minmax、fr 单位结合，可实现行高随内容自适应且最小高度为60px；grid-auto-columns 可动态分配新增列宽，适用于响应式网格布局。
在使用 CSS Grid 布局时，动态调整行高和列宽是实现响应式设计的关键。通过 auto-rows、auto-columns 和 fraction 单位（fr），可以轻松创建自适应内容变化或屏幕尺寸的网格结构。下面结合实践案例说明如何灵活运用这些特性。
自动行高：grid-auto-rows 与 minmax 配合 fr 单位
当网格容器中的行数超出显式定义范围时，浏览器会自动创建隐式轨道。通过 grid-auto-rows 可以控制这些隐式行的高度。
结合 minmax() 和 fr 单位，可以让行高根据内容自动伸缩，同时保留最小高度限制：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-auto-rows: minmax(60px, auto); /* 最小60px，内容多则自动撑开 */
}
这种写法适合卡片列表或动态数据展示场景，确保每行不会过窄，又能随内容自然扩展。
自动列宽：grid-auto-columns 灵活分配空间
当列的数量不确定或由 JavaScript 动态插入时，grid-auto-columns 能统一设置新增列的宽度策略。
例如，在仪表盘中动态添加图表模块：
.dashboard {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: 1fr; /* 所有自动创建的列等宽 */
grid-auto-flow: column; /* 按列方向自动排列 */
}
新添加的元素会自动分配到新列中，并均分可用水平空间，无需重新计算布局。
fr 单位实现比例分配与弹性填充
fr 是 Grid 中特有的弹性单位，表示“可用空间的份数”。它能替代复杂的百分比或 calc 计算。
常见用例：侧边栏固定，主区域占剩余空间
.layout {
display: grid;
grid-template-columns: 200px 1fr 2fr; /* 固定 + 弹性两列 */
gap: 16px;
}
此时中间列占一份剩余空间，右侧占两份，整体随窗口变化自动重分布，无需媒体查询干预。
实际案例：响应式商品网格（支持动态项）
假设一个电商页面需要显示商品卡，数量不定，要求每行最多三张，但允许后续追加且高度自适应。
.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 20px;
}
<p>.product-item {
background: #fff;
border-radius: 8px;
padding: 16px;
}</p>当 JS 动态添加商品时，Grid 自动创建新行并保持一致行高策略。图片或标题长度不同也不会导致错位。
基本上就这些。合理使用 auto-rows、auto-columns 和 fr 单位，能让 Grid 布局真正“活”起来，适应各种动态内容场景。不复杂但容易忽略细节的是 minmax 与 auto 的区别 —— 用 auto 才能随内容伸展，用固定值或 fr 则可能截断或拉伸异常。
