CSS grid not affected by padding-bottom

Question

I'm using CSS grid to position a dynamic number of elements into rows using grid-auto-rows.

However the last element is always placed against the bottom of the page irrespective of any padding applied to the grid container (padding is applied to the top, left & right but not to bottom).

Does anyone know where I'm going wrong?

https://codepen.io/wrgt1/pen/XWjEwXX

#container {
  position: relative;
  width: 100%;
}

.grid {
  width: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 25%;
  grid-template-columns: 1fr 1fr;
  padding: 50px;
}

.item {
  width: 250px;
  height: 250px;
  background: red;
}

<div id="container">
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 1

acutally, (just like @Shristi mentioned) the problem happens because the grid-container does not reach the bottom of the items. this happens because of the grid-auto-rows which is set to 25%. After the fourth row this fills the 100%, everything else just moves out of the container. So you should change your code as follows:

.grid {
  // box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 250px; // change this!
  grid-template-columns: 1fr 1fr;
  grid-gap: 50px; // use this for the spacing in between
  padding: 50px; // use this for the spacing top, bottom, left and right of the grid
}

the working example: here