如何在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。

中找到更多信息