Question 42995 in Html Question posted in
Some basic documentation can be found here.

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

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

Tags:

2

Answers


  1. 0

    I think you are missing the height: 100vh which can fills the entire viewport height.

    Try below:

      .grid {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 100px 1fr 50px;
      height: 100vh; /* Fills the entire viewport height */
  }
    Login or Signup to reply.
  2. 0

    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…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search