How can we spread css-grid children vertically automatically at a certain specified grid-area?

I have the following HTML table:

<style>
table {
   display: grid;
   grid-row: 1/100;
   grid-column: 1/101;
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-areas:
      ". . . ."
      ". . . . "
      ". one one . "
      " . one one .";
}
    
.one {
   grid-area: one;
}
</style>

<table>
  <tr class="one">
    <td>one-one</td>
  </tr>
  <tr class="one">
    <td>one-two</td>
  </tr>
  <tr class="one">
    <td>one-three</td>
  </tr>

  <tr class="two">
    <td>two-one</td>
  </tr>
  <tr class="two">
    <td>two-two</td>
  </tr>
  <tr class="two">
    <td>two-three</td>
  </tr>

  <tr class="three">
    <td>three-one</td>
  </tr>
  <tr class="three">
    <td>three-two</td>
  </tr>
  <tr class="three">
    <td>three-three</td>
  </tr>
</table>

Then I a create a css grid from this table and spread it into areas. Then I take the table rows with class .one (tr.one) and place them in area 1. The problem is that they stack themselves one on top of the other so that it is only the last of the elements with class .one visible - namely this one <tr class="one"><td>one-three</td></tr> .

table {
   display: grid;
   grid-row: 1/100;
   grid-column: 1/101;
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-template-areas:
      ". . . ."
      ". . . . "
      ". one one . "
      " . one one .";
}
    
.one {
   grid-area: one;
}

How can I order all three elements with class .one to align themselves vertically in the specified area "one", so that they all can be visible?