How to set width of grandchild element with grid-row?

Question

My HTML & CSS is more or less like this:

.grid {
  display: grid
  grid-template-rows: 33vh 33vh 33vh;
}

.grandma {
  grid-row: 2/span 1;
}

<div class="grid">
  <div class="grandma">
    <div class="mama">
      <div class="grandchild" />
    </div>
  </div>
</div>

I want .grandchild to span the full width and height of .grandma without changing the HTML, but setting its and .mama's width to 100% doesn't do anything. Is there a way to set grid-row of .grandchild to the same as .grandma? I don't want to hardcode its height to 33vh in case we ever change the grid row size.

Answer 1

In order for grandchild div to have the same height as grandma, set height for both mama and grandchild 100%

   .grid {
        grid-template-rows: 33vh 33vh 33vh;
        display: grid;
    }

    .grandma {
        grid-row: 2/span 1;
        background-color: gray;
    }
    .mama {
        background-color: blue;
        height: 100%;
    }
    .grandchild {
        background-color: green;
        height:100%;  
    }