如何使用CSS网格中的网格模板行为所有动态生成的行设置行高

如何使用CSS网格中的网格模板行为所有动态生成的行设置行高,css,css-grid,Css,Css Grid,我是CSS网格的新手,使用它来设计发票。在我的代码示例中,我将#itemscontent元素作为网格。此部分将从数据库加载发票项,并且可以有n行数 为了模拟,我在节中添加了3行。但我在网格模板行中设置的高度值仅应用于网格中的第一行。剩余的行仅分割剩余的可用空间 例如,对于3行, 网格模板行:2rem 2rem 2rem按预期工作,但网格模板行:2rem仅将高度应用于第一行 CSS网格中是否有任何属性可用于将2rem指定为#itemscontent网格中所有行的高度 正文{ 保证金:1.25雷姆

我是CSS网格的新手,使用它来设计发票。在我的代码示例中,我将
#itemscontent
元素作为
网格
。此部分将从数据库加载发票项,并且可以有
n
行数

为了模拟,我在节中添加了3行。但我在
网格模板行中设置的高度值仅应用于网格中的第一行。剩余的行仅分割剩余的可用空间

例如,对于3行,
网格模板行:2rem 2rem 2rem
按预期工作,但
网格模板行:2rem
仅将高度应用于第一行

CSS网格中是否有任何属性可用于将
2rem
指定为
#itemscontent
网格中所有行的高度

正文{
保证金:1.25雷姆;
边框:1px实心;
显示:网格;
网格:“页眉”“主”“页脚”;
网格模板行:3rem计算(100%-6rem)3rem;
高度:100vh;
}
标题{
网格区域:标题;
显示:网格;
网格:“标题”;
网格模板行:3rem;
}
主要{
网格区域:主;
显示:网格;
网格:“发票详细信息”“发票项目”“发票信息”;
网格模板行:15%70%15%;
边框:1px实心;
左边框:0;
右边界:0;
}
#发票详情{
网格区域:发票明细;
显示:网格;
网格:“店铺客户发票”;
网格模板柱:33.33%33.33%33.33%;
}
#顾客{
边框:1px实心;
边界顶部:0;
边界底部:0;
}
#发票项目{
网格区域:发票项;
显示:网格;
网格:“itemsheader”“itemscontent”“itemsfooter”;
网格模板行:5%80%15%;
边框:1px实心;
左边框:0;
右边界:0;
}
#项目管理员{
网格区域:itemsheader;
显示:网格;
表格:“sno说明hsn价格gst单价”;
网格模板列:10%40%10%10%10%10%10%10%10%;
对齐项目:居中;
}
#项目内容{
网格区域:项目内容;
显示:网格;
表格:“sno说明hsn价格gst单价”;
网格模板行:2rem;
网格模板列:10%40%10%10%10%10%10%10%10%;
边框:1px实心;
左边框:0;
右边界:0;
对齐项目:居中;
}
#发票信息{}
页脚{
网格区域:页脚;
显示:网格;
网格模板行:3rem;
}

美国号
描述
HSN/SAC
价格
商品及服务税(%)
单位
单价
1.
笔
-
10
0
5.
50
2.
铅笔
-
10
0
5.
50
3.
小计
100
CSS您介绍过:

#itemscontent { grid-auto-rows: 2rem; }


然后可以删除该元素的
网格模板行
定义。

我需要同时包含
网格模板行:2rem
网格自动行:2rem?如果我只添加
网格自动行:2rem这仅将大小应用于离开第一行的最后两行one@fingers10未指定
网格模板行
,页面顶部的交互式示例也未指定。非常抱歉,我输入了一个有问题的打字错误,它不是
#invoiceitems
它的
#itemscontent
。我会解决这个问题。然后你当前的网格中还有其他问题,我现在没有时间分析。我回答了您关于如何为未知数量的动态行指定高度的问题。你不同意答案是正确的吗?