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


I have a grid with variable number of rows and I want the last one to be 1fr height.

Something like this:

enter image description here

Is there any way of doing that?


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;
  flex-shrink: 1;

.fill-height > div:last-child {
  flex-grow: 1;
<section class="fill-height">
    row 1 (shrink)
    row 2 (shrink)
    row 3 (grow)

Link to JsFiddle

Answered By – service-paradis

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published