How to Make CSS Grid Last Row to Take Up Remaining Space

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>

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

You could use flex for this.

The 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 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>

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>

Let CSS grid row fill available space

You can use the repeat function to set the first two rows to min-content:

grid-template-rows: repeat(2, min-content);

Then, use display: flex on .button and shift its content to the bottom right using justify-content and align-items:

display: flex;
align-items: flex-end;
justify-content: flex-end;

Demo: (I've added borders to demonstrate the spacing.)

.wrapper {
  border: 1px solid blue;
  height: 300px;
  width: 250px;
  padding: 10px;
}

.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: repeat(2, min-content);
  row-gap: 7px;
}

.grid>div {
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

<div class="wrapper">
  <div class="grid">
    <div>
      R1C1
    </div>
    <div>
      R1C2
    </div>
    <div>
      R2C1
    </div>
    <div>
      R2C2
    </div>
    <div class="button">
      Button
    </div>
  </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>

---

Related Topics