我是新的CSS网格和使用设计一个发票。在我的代码示例中，我有#itemscontent元素作为grid。此部分将有从数据库加载的发票项目，可以有n行数。
为了嘲弄我在该节中添加了3行。但是我在grid-template-rows中设置的高度值只应用于网格中的第一行。剩余的行只是将剩余的可用空间拆分。
对于3行示例，grid-template-rows:2rem 2rem 2rem按预期工作，但grid-template-rows:2rem仅对第一行应用高度。
CSS网格中是否有任何属性可用于将2rem指定为#itemscontent网格中所有行的高度？
null
body {
margin: 1.25rem;
border: 1px solid;
display: grid;
grid: "header" "main" "footer";
grid-template-rows: 3rem calc(100% - 6rem) 3rem;
height: 100vh;
}
header {
grid-area: header;
display: grid;
grid: "caption";
grid-template-rows: 3rem;
}
main {
grid-area: main;
display: grid;
grid: "invoicedetails" "invoiceitems" "invoiceinformation";
grid-template-rows: 15% 70% 15%;
border: 1px solid;
border-left: 0;
border-right: 0;
}
#invoicedetails {
grid-area: invoicedetails;
display: grid;
grid: "shop customer invoice";
grid-template-columns: 33.33% 33.33% 33.33%;
}
#customer {
border: 1px solid;
border-top: 0;
border-bottom: 0;
}
#invoiceitems {
grid-area: invoiceitems;
display: grid;
grid: "itemsheader" "itemscontent" "itemsfooter";
grid-template-rows: 5% 80% 15%;
border: 1px solid;
border-left: 0;
border-right: 0;
}
#itemsheader {
grid-area: itemsheader;
display: grid;
grid: "sno description hsn price gst unit unitprice";
grid-template-columns: 10% 40% 10% 10% 10% 10% 10%;
align-items: center;
}
#itemscontent {
grid-area: itemscontent;
display: grid;
grid: "sno description hsn price gst unit unitprice";
grid-template-rows: 2rem;
grid-template-columns: 10% 40% 10% 10% 10% 10% 10%;
border: 1px solid;
border-left: 0;
border-right: 0;
align-items: center;
}
#invoiceinformation {}
footer {
grid-area: footer;
display: grid;
grid-template-rows: 3rem;
}<html>
<head></head>
<body>
<header></header>
<main>
<section id="invoicedetails">
<section id="shop"></section>
<section id="customer"></section>
<section id="invoice"></section>
</section>
<section id="invoiceitems">
<section id="itemsheader">
<div>S.No</div>
<div>Description</div>
<div>HSN/SAC</div>
<div>Price</div>
<div>GST (%)</div>
<div>Unit</div>
<div>Unit Price</div>
</section>
<section id="itemscontent">
<div>1</div>
<div>Pen</div>
<div>-</div>
<div>10</div>
<div>0</div>
<div>5</div>
<div>50</div>
<div>2</div>
<div>Pencil</div>
<div>-</div>
<div>10</div>
<div>0</div>
<div>5</div>
<div>50</div>
<div>3</div>
<div>SubTotal</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div>100</div>
</section>
<section id="itemsfooter"></section>
</section>
<section id="invoiceinformation"></section>
</main>
<footer></footer>
</body>
</html>null
CSS为您提供了以下服务：
#itemscontent { grid-auto-rows: 2rem; }
https://developer.mozilla.org/en-us/docs/web/css/grid-auto-rows
然后可以删除该元素的grid-template-rows定义。
