如何在sass中正确显示我的项目网格？我的图像没有形成3行网格

我的代码：

.items {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
}

如何将图像正确显示为3列网格？

  <section id="work-a" class="text-center py-3">

   <div class="container">
       <h2 class="section-title">My Work</h2>
       <div class="bottom-line"></div>
       <p class="lead">
         Check out some of my projects
       </p>
       <div class="items">
        <div class="item">
          <div class="item-image">
             <img src="img/items/item1.png" alt="">
          </div>
          <div class="item-text">
              <div class="item-text-wrap">
                <p class="item-text-category">Design</p>
                <h2 class="item-text-title">Great Gradients</h2>
            </div>
        </div>
    </div>
    <div class="item">
       <div class="item-image">
           <img src="img/items/item2.png" alt="">
       </div>
       <div class="item-text">
          <div class="item-text-wrap">
             <p class="item-text-category">Design</p>
             <h2 class="item-text-title">Great Gradients</h2>
          </div>
      </div>
  </div>
  <div class="item">
      <div class="item-image">
          <img src="img/items/item3.png" alt="">
      </div>
      <div class="item-text">
        <div class="item-text-wrap">
          <p class="item-text-category">Design</p>
          <h2 class="item-text-title">Great Gradients</h2>
           </div>
         </div>
       </div>
     </div>
   </div>
</section>

我的作品

看看我的一些项目

设计

大梯度
设计

大梯度
设计

大梯度

您也可以显示您的HTML吗？