My grid row is not adjusting itself when routed for a different form that is going to be displayed inside the row

In my CSS file, I have created 4 grid rows on a page. A column in the 3rd row has a further 9 rows that when combined make up a form. At the end of the form, I have a continue button that is doing nested-routing and bringing another form within that column in the 3rd row. Now, the column is going to have 6 rows, and I have defined these 6 rows using grid-template-rows. Since the number of rows is lesser this time, I'm expecting the column in the 3rd row to shrink according to the number of rows which are reduced to 6. But the column is not shrinking. Any help?

1st Screenshot with 9 rows

The first image shows the middle column, which is part of the 3rd row of the entire page, has 9 rows.

2nd Screenshot with 6 rows

The second image shows that when the number of rows are reduced from 9 to 6, the size of the column in the 3rd row of the page remains the same.

.cjt-container {
background: #f4f5f7;
display: grid;
grid-template-rows: 0.8fr 1.8fr 32fr 3fr;
}

*/First form/*

.c2-for-form {
 grid-column: 2/3;
 background: #ffffff;
 box-shadow: 0px 3px 10px #c2c5d129;
 border-radius: 10px;
 display: grid;
 grid-template-rows: 1.55fr 1.8fr 1.8fr 2fr 2.85fr 1.55fr 1.55fr 1.55fr 2.85fr;
 }

 */Second form/*

 .c2-job-details-form {
  grid-column: 2/3;
  background: #ffffff;
  box-shadow: 0px 3px 10px #c2c5d129;
  border-radius: 10px;
  display: grid;
  grid-template-rows: 1.5fr 1.5fr 2.75fr 1.45fr 1.45fr 2fr;
  }