How to Make CSS Grid Items Take Up Remaining Space

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>

Expanding to fill remaining space in a CSS Grid layout

The 100% for the 2nd column in your grid-template-columns is based on the width of the container - rather than occupying the space outstanding within the container, it will push out to the right because the 2nd column is trying to match the width of the container.

Try changing this to auto and this should rectify the issue, as it will only take up the space up to the end of the container and no further.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

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 grid-items take only remaining space from rows?

I like to think about grids are abstractional layers and not fixed structures. This way you freely place your divs into the grid blocks and not BE the grid blocks.

Following this pattern, defining a grid of 8 rows, for example, and telling your divs to occupy "x" rows could do the trick. Feel free to play with the rows number and spans to better suit your needs. :)

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.container>div {
  background-color: teal;
  border-radius: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: whitesmoke;
}

.item1 {
  grid-row: 1/8;
  height: 500px;
}

.item2,
.item3,
.item4 {
  grid-row: span 2;
  height: 100px;
}

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</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>

CSS Grid - Stretch to fill remaining space

grid-template-columns:1fr auto 1fr;

Here you go, use the auto instead of 1fr for the centered div.

How to Make CSS Grid Items Take Up Remaining Space