如何在Ionic3中创建此布局

我想创建布局波纹管，我试图使用css padding: 0;但我仍然得到一些填充和边距。第二个图像是我所得到的。为布局如何在Ionic3中创建此布局

<ion-content class="home"> 
    <ion-grid> 
     <ion-row> 
     <ion-col> 
      <img src="assets/Instrumentitem1.png" alt=""> 
      <p>Bass</p> 
     </ion-col> 
     </ion-row> 
     <ion-row > 
     <ion-col> 
      <img src="assets/Instrumentitem2.png" alt=""> 
      <p>Cello</p> 
     </ion-col> 
     </ion-row> 
     <ion-row> 
     <ion-col> 
      <img src="assets/Instrumentitem3.png" alt=""> 
      <p>Viola</p> 
     </ion-col> 
     </ion-row> 
    </ion-grid> 
</ion-content>

对于我这个造型代码是我做了什么。我也尝试删除图像上的填充和边距，但我得到了相同的结果。

.home{ 
     scroll-content{ 
     display: flex; 
     flex-direction: column; 
     } 
    ion-grid{ 
     padding: 0; 
    } 
    ion-row{ 
     flex: 1; 
    } 
    img{ 
    } 
    p{ 
    position: absolute; 
    color: white; 
    font-size: 3em; 
    font-weight: bold; 
    top: 10%; 
    right: 20%; 
    } 
    }