javascript - How to position the bottom-most container in a grid layout

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65950368/how-to-position-the-bottom-most-container-in-a-grid-layout

Answer 1

You can change your css code and make it:

    .container {
       height: 100vh;
       display: grid;
       grid-template-rows: 100px 1fr auto;
    }

What do you want is the 1fr. In this way the middle div will fill all the available empty space. See here for details about the fr unit: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#the_fr_unit