使用 grid-auto-rows 与 minmax() 可实现多行文字自动排列并自适应高度，同时保留最小高度限制。通过设置 grid-auto-rows: minmax(40px, auto)，确保每行至少 40px 高且能随内容扩展，适用于文章列表、卡片布局等动态内容区域。结合 grid-template-columns 与 gap 可创建响应式网格，项目高度由内容决定，避免截断。推荐配合 align-items: start 防止垂直拉伸，提升可读性与点击区域合理性。
在使用 CSS Grid 布局时，如果希望实现多行文字内容的自动排列，并且每行的高度能根据内容自适应，同时又保留最小高度限制，可以结合 grid-auto-rows 和 minmax() 函数来实现。这种方法特别适合动态内容区域，比如文章列表、卡片布局或聊天消息等。
grid-auto-rows 与 minmax() 的作用
grid-auto-rows 定义了网格中自动生成的行的高度。当网格容器中的项目数量超过显式定义的行数时，浏览器会自动创建新行，这些行的高度由 grid-auto-rows 控制。
minmax(min, max) 是一个CSS函数，用于定义尺寸的范围：最小值和最大值。例如 minmax(40px, auto) 表示该行高度至少为 40px，但如果内容更高，则自动扩展以容纳内容。
实现多行自适应高度的布局
以下是一个实用示例，展示如何用 grid-auto-rows: minmax(40px, auto) 实现多行文字排列：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(40px, auto);
gap: 16px;
padding: 20px;
}
.item {
background: #e0f7fa;
padding: 12px;
border-radius: 4px;
}
HTML 结构示例：
<div class="container"> <div class="item">这是一段较短的文字</div> <div class="item">这是一段非常长的文字，可能会占据多行显示，需要足够的高度来展示全部内容……</div> <div class="item">第三条内容</div> <div class="item">第四条，也可能很长，换行后依然保持良好间距和高度适应</div> </div>
在这个例子中：
- 容器使用 Grid 布局，列宽根据屏幕宽度自动调整，每列至少 250px，最多 1fr。
-
grid-auto-rows: minmax(40px, auto)确保每一自动行至少有 40px 高，但能随内容变高。 - gap 提供项目之间的间距，避免视觉拥挤。
- 每个 item 内的文字自然换行，高度由内容决定，不会被截断或挤压。
适用场景与注意事项
这种写法非常适合内容长度不一的卡片、表单项、消息气泡等 UI 组件。关键优势在于无需预设行高，也能保证最小可点击区域和良好的可读性。
注意点：
- 避免给
grid-auto-rows设置固定值（如 60px），否则内容过长会被裁剪或产生空白。 - 若使用
auto单独作为值，可能在某些情况下导致高度塌陷，minmax()更安全。 - 配合
align-items: start可防止项目在单元格内垂直拉伸。
基本上就这些，不复杂但容易忽略细节。掌握 grid-auto-rows 与 minmax() 的组合，能让 Grid 布局更灵活应对文本类内容的排版需求。
