title: How to create grid layout where all unknown number of rows have equal height but not the last row?
body: <p>I am creating a form with the unknown number of rows but the last row should be fixed height which contains form action button now how to write this in the grid system.</p>
  
  <p>here is the main container CSS property</p>
  
  <pre><code>{
       display:grid;
       grid-template-area: 'body' 'button';
       grid-template-row: 1fr 80px 
       grid-auto-flow: row;
       grid-gap: 10px
   }
  </code></pre>
  
  <p>I know <code>grid-template-row: 1fr 80px</code> will create one row and the next row of 80px;</p>
  
  <p>I need to write something like this <code>repeat(x, 1fr), 80px</code></p>
  
  <p>how can achieve this using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout" rel="nofollow noreferrer">CSS Grid Layout</a>
   .</p>