无法使内容占用整个网格单元空间

Question

我有以下顶级css grid。它有2行2列。在第一行中，我放置了<p>，它占据了整行。在第二行中，我放置了2个组件，每列1个

.homepage-component-css-grid-container{
  display: grid;
  grid-gap:20px;
  grid-template-rows: 50px 1fr; 
  grid-template-columns: 1fr 1fr;  
  height:100%; 
}


p { /*1 row, 2 columns*/
  font: 300 1.5em 'Raleway', sans-serif;
  color: rgba(0,0,0,.5);
  grid-row: 1/2;
  grid-column: 1/-1;
}
app-practice-component{ /*2nd row, 1st column*/
  grid-row: 2/3;
  grid-column: 1 / 2;
  align-self: center;
  justify-self:end;

}

app-create-component{/*2nd row, 2nd column*/
  grid-row: 2/3;
  grid-column: 2 / 3;
  align-self: center;
  justify-self:start;

}

app-create-component和app-practice-components本身是4行1列的CSS网格。我在第3行的第1行中各放置1 <p>，在第4行的第1行中放置1 <button>

.css-grid-container__create-div{
  display:grid;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr;
}



.css-grid-item__create-para1-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

.css-grid-item__create-para2-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

.css-grid-item__create-para3-div{
  margin-left:40px;
  margin-top:30px;
  grid-column: 1  / -1;
  grid-row: 3 / 4;
}

.css-grid-item__create-button-div{
  align-self: center;
  justify-self:center;
  grid-column: 1 / -1;
  grid-row: 4 / 5;
}

页面看起来如下：

在可见的情况下，app-create-component和app-practice-components并没有占据单元格的整个空间。它们的大小似乎取决于其中内容的大小。我如何让它们占据他们所在的网格单元中90％的可用大小。我尝试使用height:90%和width:90%，但这没用