Grid question - Having 6 squares that take the full screen size

Ionic Framework ionic-v3
1

Hi,

I have 6 squares that I want to be displayed and that take the full screen size.

I tried 2 ways:

  • 1 row of 6 columns where each column takes col-6 space.
  • 3 rows of 2 columns each where each column takes col-6 space.

I have my 6 squares, but still have empty space at the bottom of the screen. How can I make sure all my columns will take the same space and the full screen at the same time?

I tried css where

ion-row {
height: 100%;
}

but did not work

I am using the latest Ionic 3 version.

Thanks

2

I’m using a tabs-based scratch project, so not sure how that translates, but the following appears to take up all available screen real estate between the page title and the tabs at the bottom:

<ion-grid>
    <ion-row>
      <ion-col col-4>a</ion-col>
      <ion-col col-4>b</ion-col>
      <ion-col col-4>c</ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-4>d</ion-col>
      <ion-col col-4>e</ion-col>
      <ion-col col-4>f</ion-col>
    </ion-row>
  </ion-grid>

page-home {
  ion-grid {
    height: 100%;
    border: 2px solid black;
  }

  ion-row {
    height: 50%;
  }
}
3 Likes
3

Thanks @rapropos. Working good.

Any idea how to add padding to ion-col? For some reason, my css is not applied.

ion-col {
padding: 10px;
}

Thanks

4

Solved my issue

ion-col div {
padding: 10px;
}

<ion-col>
  <div>
    ...
  </div>
</ion-col>