网格问题，可能与高度有关

Question

布局中显示的内容：

我做了什么：

代码：

.portfolio__items{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 15px;
}

.portfolio__item-img{
  background: #EDEDED;
  border: 12px solid rgba(237, 237, 237, 1);
  color: #EDEDED;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .5s;
}

.portfolio__item-img:hover{
  background: linear-gradient(0deg, rgba(36, 33, 33, 0.8), rgba(36, 33, 33, 0.8)), #EDEDED;
  border: 12px solid rgba(255, 255, 255, 0.15);
  color: #fff;
}

.portfolio__item-img-1, .portfolio__item-img-2{
  grid-column-start: 1;
}

.portfolio__item-img-3, .portfolio__item-img-4, .portfolio__item-img-5{
  grid-column-start: 2;
}

.portfolio__item-img-6, .portfolio__item-img-7{
  grid-column-start: 3;
}

.portfolio__item-img-8, .portfolio__item-img-9{
  grid-column-start: 4;
}

.portfolio__item-img-1{
  grid-row-start: 1;
  grid-row-end: 5;
}

.portfolio__item-img-2{
  grid-row-start: 5;
  grid-row-end: 10;
}

.portfolio__item-img-3{
  grid-row-start: 1;
  grid-row-end: 4;
}

.portfolio__item-img-4{
  grid-row-start: 4;
  grid-row-end: 7;
}

.portfolio__item-img-5{
  grid-row-start: 7;
  grid-row-end: 10;
}

.portfolio__item-img-6{
  grid-row-start: 1;
  grid-row-end: 6;
}

.portfolio__item-img-7{
  grid-row-start: 6;
  grid-row-end: 10;
}

.portfolio__item-img-8{
  grid-row-start: 1;
  grid-row-end: 4;
}

.portfolio__item-img-9{
  /* grid-row-start: 4; */
  /* grid-row-end: 10; */
}

<div class="portfolio__items">
      <div class="portfolio__item-img portfolio__item-img-1">
        <div class="portfolio__item-title">OCCA CUPIDATAT 1</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-2">
        <div class="portfolio__item-title">OCCA CUPIDATAT 2</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-3">
        <div class="portfolio__item-title">OCCA CUPIDATAT 3</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-4">
        <div class="portfolio__item-title">OCCA CUPIDATAT 4</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-5">
        <div class="portfolio__item-title">OCCA CUPIDATAT 5</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-6">
        <div class="portfolio__item-title">OCCA CUPIDATAT 6</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-7">
        <div class="portfolio__item-title">OCCA CUPIDATAT 7</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>

      <div class="portfolio__item-img portfolio__item-img-8">
        <div class="portfolio__item-title">OCCA CUPIDATAT 8</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
      
      <div class="portfolio__item-img portfolio__item-img-9">
        <div class="portfolio__item-title">OCCA CUPIDATAT 9</div>
        <div class="portfolio__item-descr">DESIGN</div>
      </div>
    </div>

目前，

.portfolio__item-img-9

元素没有像

grid-row-start

和

grid-row-end

这样的网格属性（它们被注释掉了），如果我取消注释它们，其他元素的属性将停止工作

我认为我的问题的原因是父 div

.portfolio__items

没有足够的高度供其子级使用，但我不确定。

我试图为它增加一些高度，但它没有做任何事情。