在css中如何用grid-template-rows设置自适应行-css教程-PHP中文网

在css中如何用grid-template-rows设置自适应行

P粉602998670

发布： 2025-10-05 16:44:02

原创

513人浏览过

使用 auto、min-content、max-content、fr 单位及 minmax() 函数可实现 CSS Grid 行高自适应，.container { display: grid; grid-template-rows: auto 1fr auto;} 中 auto 根据内容调整，1fr 占剩余空间，minmax(100px, 1fr) 设最小高度且可扩展，结合使用可让行高灵活响应内容与容器变化。

在css中如何用grid-template-rows设置自适应行

在 CSS Grid 布局中，使用 grid-template-rows 实现自适应行高，关键在于合理利用长度单位和关键字，让行根据内容或容器空间自动调整。下面介绍几种常用方式。

1. 使用 auto 关键字（内容自适应）

将某一行设置为 auto，表示该行高度由内容决定，是最基本的自适应方式。

例如：

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

立即学习“前端免费学习笔记（深入）”；

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

登录后复制

这里第一行和最后一行根据内容自动调整高度，中间行占据剩余空间。

2. 使用 min-content 和 max-content

这两个关键字能更精细地控制内容对行高的影响：

min-content：行高等于内容最小可压缩高度（如换行后的最小高度）
max-content：行高等于内容不换行时的自然高度

适用于需要根据内容“挤”出合适高度的场景。

3. 结合 fr 单位实现弹性分配

使用 fr 单位可以让某些行按比例分配剩余空间，实现动态自适应。

例如：

立即学习“前端免费学习笔记（深入）”；

.container {
  display: grid;
  grid-template-rows: auto 1fr 2fr;
}

登录后复制

第一行由内容决定高度，第二行占1份剩余空间，第三行占2份，整体布局随容器变化而调整。

4. 使用 minmax() 函数设置弹性范围

最灵活的方式是用 minmax()，定义行高的最小和最大范围。

例如：

立即学习“前端免费学习笔记（深入）”；

.container {
  grid-template-rows: auto minmax(100px, 1fr) auto;
}

登录后复制

中间行至少 100px，但可以扩展到占满剩余空间，兼顾了最小显示需求和自适应能力。

基本上就这些方法。根据实际需求选择 auto、fr 或 minmax() 组合，就能让 grid 行自然适应内容和屏幕尺寸。关键是理解每个单位的行为逻辑，避免固定高度限制布局灵活性。

以上就是在css中如何用grid-template-rows设置自适应行的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

css边框颜色border-color设置技巧 CSS动画元素的初始状态如何设置_keyframes from与to技巧 CSS定位元素在不同浏览器中的表现一致吗_兼容性分析与优化 CSS框架Bulma的Flexbox布局如何使用_弹性盒子实践在css中link标签跨域样式引入问题