How to Make the Items in the Last Row Consume Remaining Space in CSS Grid

How to make CSS Grid last row to take up remaining space

you could use flex for this.

Te parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.

After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.

See the snippet below:

html, body {  height: 100%;}
.fill-height {  height: 100%;  display: flex;  flex-direction: column;}
.fill-height > div {  border: 1px solid red;  min-height:2em;  flex-shrink: 1;}
.fill-height > div:last-child {  flex-grow: 1;}

<section class="fill-height">  <div>    row 1 (shrink)  </div>  <div>    row 2 (shrink)  </div>  <div>    row 3 (grow)  </div></section>

How to make an element of a Grid take all remaining space?

1st: Give the grid a min-height like 100vh (.grid { min-height: 100vh; }). This will make consume at least the viewports height.

2nd: Give the the first and last row a height of min-content. That will make it only consume as much height as needed. auto will then consume all remaining space by default.

.grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto min-content;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}

<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

How to make CSS Grid items take up remaining space?

Adding grid-template-rows: 1fr min-content; to your .grid will get you exactly what you're after :).

.grid {  display: grid;  grid-template-columns: 1fr 3fr;  grid-template-rows: 1fr min-content;  grid-template-areas:    "one two"    "one three"}
.one {  background: red;  grid-area: one;  padding: 50px 0;}
.two {  background: green;  grid-area: two;}
.three {  background: blue;  grid-area: three;}

<div class="grid">  <div class="one">    One  </div>  <div class="two">    Two  </div>  <div class="three">    Three  </div></div>

Row in CSS Grid should take up remaining space

Specify auto sizing for the header row and 1fr to allocate all the remaining space to the content row.

html, body { margin: 0; padding: 0; }* { box-sizing: border-box; }
body {  display: grid;  grid-template-rows: auto 1fr;  height: 100vh;  width: 100vw;}
header {  border: 1px solid red;}
.content {  border: 1px solid blue;}

<header>  <h1>IMG + Some header text</h1></header>
<div class="content">  Here will be dynamic content (a grid on its own).  Should take all the remaining height.</div>

Fill grid container so that last grid item area is always filled

Since it's will only be 5 columns you can explicitly define this for each element using nth-last-child()

.grid {  display:grid;  grid-template-columns:repeat(5,1fr);  grid-gap:5px;  margin:5px;}.grid > span {  padding:10px;  background:yellow;  }
.grid > span:nth-last-child(1) { grid-column:5; }.grid > span:nth-last-child(2) { grid-column:4; }.grid > span:nth-last-child(3) { grid-column:3; }.grid > span:nth-last-child(4) { grid-column:2; }/*.grid > span:nth-last-child(5) { grid-column:1; } this one is not needed*/

<div class="grid"><span>a</span><span>b</span><span>c</span><span>d</span></div>
<div class="grid"><span>a</span><span>b</span></div>
<div class="grid"><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span></div>