Search code examples
htmlcsscss-grid

How to make a empty grid-template-row to fill up remaining space?

How can I create a grid layout with 3 rows so that the rows fill the entire screen, even if the rows are empty?

For example, header and footer have 100px and 50px. The middle grid row (main area) should fill the remaining screen.

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px auto 50px;
}

header {
  grid-column: 1/2;
  grid-row: 1/2;
  background-color: bisque;
}

main {
  grid-column: 1/2;
  grid-row: 2/3;
  background-color: chocolate;
}

footer {
  grid-column: 1/2;
  grid-row: 3/4;
  background-color: darkolivegreen;
}
<body class="grid">

  <header>
    Header
  </header>

  <main>
    Main
  </main>


  <footer>
    Footer
  </footer>

</body>

I've read similar questions here but haven't found anything suitable (I'm also still a beginner in web design).

enter image description here

Solution

  • There are 2 solutions, better and worse:

    1. Determine parent div height and use 1fr
    .grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 100px 1fr 50px;
  min-height: 100vh;
}
    1. Remove grid-template-rows and determine childrens` heights seperately
    .grid {
  display: grid;
  grid-template-columns: 1fr;
}

header {
  background-color: bisque;
  height: 100px;
}

main {
  background-color: chocolate;
  height: calc(100vh - 250px);
}

footer {
  background-color: darkolivegreen;
  height: 150px;
}

    as I mentioned, 1st solution is much more sophisticated so to say...