how to set row height for all dynamically generated rows using grid-template-rows in CSS Grid

I'm new to CSS Grid and using to design an invoice. In my code sample, I have #itemscontent element as grid. This section will have invoice items loaded from database and there can be n number of rows.

To mock that I have added 3 rows to the section. But the height value that I set in grid-template-rows is getting applied only to first row in grid. Remaining rows just split the remaining available space.

For 3 rows example, grid-template-rows: 2rem 2rem 2rem works as expected but grid-template-rows: 2rem applies height only to first row.

Is there any property in CSS Grid which can use to specify 2rem as height for all rows inside #itemscontent grid?

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>

Solution

CSS has you covered:

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

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows

You can then remove the grid-template-rows definition for that element.