Html 调整行高以适应CSS网格中的动态内容

我有这个密码

a{
文字装饰：无；
颜色：黑色
}
* {
保证金：0；
填充：0；
}
[数据内容=“光标”]{
显示：网格；
网格模板列：87px 1fr 10ex；
网格模板行：最小最大值（最小内容，45px）1fr 18px；
网格模板区域：“simb标题”“simb副标题”“价格”；
填充：0；
宽度：340px；
高度：120px
}
[data curso=“title”]{
网格区域：标题；
颜色：rgb（41,48,59）；
左边距：7px
}
[data curso=“precio”]{
网格面积：价格；
显示：网格；
网格模板柱：1fr 1fr；
字号：18px
}
[data precio=“simb”]{
高度：17px；
}
[data curso=“simb”]{
网格区域：simb；
高度：87px；
宽度：87px；
自我校准：灵活启动；
自我证明：居中
}
[data curso=“subtitle”]{
网格区域：字幕；
颜色：#686f7a；
左边距：7px
}

---

您似乎没有很好地理解minmax（）的工作原理，它与特定行无关，尽管它根据网格的高度定义了该行的高度

现在，如果网格有空间支持您定义的45px，那么h4将始终具有45px的高度，因此较少的文本将导致空白，如果网格不能支持那么多高度，那么h4将在其内容高度（最小内容）和45px之间调整大小，如果您将网格高度设置为0，您将看到h4保持了自己的内容高度

我建议您删除minmax（）并改用auto

a{
文字装饰：无；
颜色：黑色
}
* {
保证金：0；
填充：0；
}
[数据内容=“光标”]{
显示：网格；
网格模板列：87px 1fr 10ex；
网格模板行：自动1fr 18px；
网格模板区域：“simb标题”“simb副标题”“价格”；
填充：0；
宽度：340px；
高度：120px
}
[data curso=“title”]{
网格区域：标题；
颜色：rgb（41,48,59）；
左边距：7px
}
[data curso=“precio”]{
网格面积：价格；
显示：网格；
网格模板柱：1fr 1fr；
字号：18px
}
[data precio=“simb”]{
高度：17px；
}
[data curso=“simb”]{
网格区域：simb；
高度：87px；
宽度：87px；
自我校准：灵活启动；
自我证明：居中
}
[data curso=“subtitle”]{
网格区域：字幕；
颜色：#686f7a；
左边距：7px
}

---

我认为问题在于

1fr

是在考虑了最大基本尺寸后应用的

换句话说，在第1行中看到最大值为45px，在第3行中看到最大值为18px，然后将它们相加。第2行使用

1fr

消耗剩余的部分（340px-63px）

您可以通过采取不同的方法来解决问题：

• 忘记

  minmax（）

• 将行设置为自动（基于内容的高度）
• 控制网格项上的最大高度
• 将项目设置为溢出：隐藏

a{
文字装饰：无；
颜色：黑色
}
* {
保证金：0；
填充：0；
}
[数据内容=“光标”]{
显示：网格；
网格模板列：87px 1fr 10ex；
网格模板行：自动1fr 18px；/*调整*/
网格模板区域：“simb标题”
“simb字幕字幕”
“.价格”；
填充：0；
宽度：340px；
高度：120px
}
[data curso=“title”]{
网格区域：标题；
颜色：rgb（41,48,59）；
左边距：7px；
最大高度45px；/*新*/
溢出：隐藏；/*新建*/
}
[data curso=“precio”]{
网格面积：价格；
显示：网格；
网格模板柱：1fr 1fr；
字号：18px
}
[data precio=“simb”]{
高度：17px；
}
[data curso=“simb”]{
网格区域：simb；
高度：87px；
宽度：87px；
自我校准：灵活启动；
自我证明：居中
}
[data curso=“subtitle”]{
网格区域：字幕；
颜色：#686f7a；
左边距：7px
}

当标题变大时，内容溢出，如果我设置overflow:hidden，它不会显示数字1500，那么你必须将he包装在一个div中并设置overflow auto。