Ionic Grid Cards

Ionic Framework ionic-v3
1

I need to make a grid like this:

15

I’m using this style:

  <div cards>

    <div class="grid-full">
      <ion-row>
        <ion-col>
          <ion-card>
            <h1 orange>27</h1>
            <p>A homolar</p>
          </ion-card>
        </ion-col>

        <ion-col>
          <ion-card>
            <h1 grey>10</h1>
            <p>Encerradas</p>
          </ion-card>
        </ion-col>

        <ion-col>
          <ion-card>
            <h1 green>41</h1>
            <p>Em gozo</p>
          </ion-card>
        </ion-col>

        <ion-col>
          <ion-card>
            <h1 green>18</h1>
            <p>Homologadas</p>
          </ion-card>
        </ion-col>
      </ion-row>
    </div>

  </div>

    [cards] {
        .grid-full ion-col {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 5px 0;
        }
        .row {
            padding: 0;
        }
        .col {
            padding: 5px 0;
        }
        .card {
            margin: 0 0 0 12px;
            padding: 14px;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
            border-radius: 4px;
            h1 {
                font-weight: 400;
                font-size: $main-font-size;
                font-size: 3.5rem;
            }
            p {
                font-weight: 100;
                font-size: 1.5rem;
            }
        }
    }

but I have this gap between this cards:

40
Screen Shot 2017-09-11 at 16.54.40.png732×424 16.3 KB

How could I remove the space beetwen the cards?

2

There are SCSS variables that you can modify to control the padding.

3

Works like spec with this code:

[cards] {
    .grid-full ion-col {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 5px 0;
    }
    .row {
        padding: 0 12px;
    }
    .col {
        padding: 5px 0;
    }
    .card {
        margin: 0 5px;
        width: calc(100% - 10px);
        padding: 14px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
        border-radius: 4px;
        h1 {
            font-weight: 400;
            font-size: $main-font-size;
            font-size: 3.5rem;
        }
        p {
            font-weight: 100;
            font-size: 1.5rem;
        }
    }
}
4

Use ionic classes like: <ion-no-padding> or <ion-no-margin> for more please visit ionic CSS Utilities.