如何在Ionic3中创建此布局

Question

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

<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%; 
    } 
    } 

Answer 1

您可以使用no-padding属性网格元素，像这样：

<ion-grid no-padding>...</ion-grid> 

既然...

从网格和直接的子列删除填充。

你可以在Ionic docs找到更多的信息。