Question 45910 in CSS Question posted in
Some basic documentation can be found here.

How to take up all available vertical space within a grid? – CSS

I have a css grid in which I want the last row to take up all the available vertical space

.r3 in the .main-content region of my snippet should occupy the remaining space. How can I do that?

At the moment the height of .r3 is only as tall as it needs to be (height:auto; if you so will)

Here is the snippet of what I’ve tried. You have to use the "full page" feature to visualize the situation.

html,
body {
  margin: 0;
  padding: 0;
}

.app-root {
  display: flex;
  height: 100vh;
  background-color: #e0e0e0;
}
.app-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 30px;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "navbar navbar"
    "sidebar main-content"
    "statusbar statusbar";
}

.navbar {
  grid-area: navbar;
  background-color: yellow;
}

.statusbar {
  grid-area: statusbar;
  background-color: black;
  color: white;
}

.sidebar {
  grid-area: sidebar;
  background-color: red;
}

.main-content {
  grid-area: main-content;
  padding: 12px;
  background-color: blue;
}

.container {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto auto 1fr;
  gap: 15px 15px;
  grid-template-areas:
    "r1 r1"
    "r2 r2"
    "r3c1 r3c2";
}

.r1 {
  grid-area: r1;
  background-color: turquoise;
}
.r2 {
  grid-area: r2;
  background-color: brown;
}
.r3c1 {
  grid-area: r3c1;
  background-color: orange;
}
.r3c2 {
  grid-area: r3c2;
  background-color: white;
}
<div class="app-root">
  <div class="app-grid">
    <div class="navbar">
      nav goes brrr
    </div>

    <div class=sidebar>sidebar goes brr</div>
    <div class=main-content>

      <div class="container">
        <div class="r1">r1
        </div>

        <div class="r2">r2
        </div>

        <div class="r3c1">r3c1
        </div>

        <div class="r3c2">r3c2
        </div>
      </div>

    </div>

    <div class="statusbar">
      status goes brrr
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    If you use grid-area for element r1,r2… You can use the align stretch

    html,
body {
  margin: 0;
  padding: 0;
}

.app-root {
  display: flex;
  height: 100vh;
  background-color: #e0e0e0;
}

.app-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 30px;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "navbar navbar" "sidebar main-content" "statusbar statusbar";
}

.navbar {
  grid-area: navbar;
  background-color: yellow;
}

.statusbar {
  grid-area: statusbar;
  background-color: black;
  color: white;
}

.sidebar {
  grid-area: sidebar;
  background-color: red;
}

.main-content {
  grid-area: main-content;
  padding: 12px;
  background-color: blue;
}

.container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto auto 1fr;
  gap: 15px;
}

.r1 {
  align-self: start;
  grid-area: 1 / 1 / 2 / 3;
  background-color: turquoise;
}

.r2 {
  grid-area: 2 / 1 / 3 / 3;
  align-self: start;
  background-color: brown;
}

.r3c1 {
  grid-area: 3 / 1 / 4 / 2;
  background-color: orange;
  align-self: stretch;
}

.r3c2 {
  grid-area: 3 / 2 / 4 / 3;
  background-color: white;
  align-self: stretch;
}
    <div class="app-root">
  <div class="app-grid">
    <div class="navbar">
      nav goes brrr
    </div>

    <div class=sidebar>sidebar goes brr</div>
    <div class=main-content>

      <div class="container">
        <div class="r1">r1
        </div>

        <div class="r2">r2
        </div>

        <div class="r3c1">r3c1
        </div>

        <div class="r3c2">r3c2
        </div>
      </div>

    </div>

    <div class="statusbar">
      status goes brrr
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You just need to set the height of the last row to 1fr and second row to auto. This will make the second row take space as its content and the last row to take up all the remaining space space.

    You need to edit the app-grid class only for that :

    grid-template-rows: 60px auto 1fr;

    This will achieve the the result:

    enter image description here

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

Back To Top
Search