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

自从它...

Removes padding from the grid and immediate children columns.

您可以在 Ionic docs.

中找到更多信息

如何在 Ionic3 中创建此布局

How to create this layout in Ionic3

css

ionic2

flexbox

ionic3

css-grid