Ionic 4: ion-grid how to make the rows fill the remaining height 50% each

Ionic Framework
1

I’ve got the following layout and I’d like to have the boxes fill the remaining height 50%, so they appear equal.

Not having much luck with my flexbox css, so if anyone could advise, that’d be great, thanks.

Layout graphic as it renders at the moment:

Screenshot 2020-03-04 at 10.51.09
Screenshot 2020-03-04 at 10.51.091362×1490 109 KB

Markup:

<ion-content>
    <!-- ... -->
    <ion-item>
      Something here
    </ion-item>
    <ion-grid>
      <ion-row>
        <ion-col size="6" class="col-top-left">
            <!-- ... -->
        </ion-col>
        <ion-col size="6" class="col-top-right">
            <!-- ... -->
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="6" class="col-bottom-left">
            <!-- ... -->
        </ion-col>
        <ion-col size="6" class="col-bottom-right">
            <!-- ... -->
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

CSS I’m using:

ion-grid {
    --ion-grid-padding: 0px;
    ion-row {
        padding: 0px;
    }

    ion-col {
        padding: 0px;
    }

    .col-top-left {     padding-right: 8px; padding-bottom: 8px; }
    .col-top-right {    padding-left: 8px; padding-bottom: 8px; }
    .col-bottom-left {  padding-right: 8px; padding-top: 8px; }
    .col-bottom-right { padding-left: 8px; padding-top: 8px; }
}
2

While you wait for somebody who likes Ionic’s grid (i.e. “not me”) to suggest something more tailored to what you’ve got so far, here’s how I would do it:

<ion-content>
    <div class="oya">
        <ion-item class="something-here"><ion-label>something here</ion-label></ion-item>
        <div class="added button">added</div>
        <div class="changed button">changed</div>
        <div class="viewed button">viewed</div>
        <div class="other button">other</div>
    </div>
</ion-content>

.oya {
  display: grid;
  height: 100%;
  grid-template-columns: auto auto;
  grid-template-rows: max-content auto auto;

  .something-here {
    grid-column: 1 / span 2;
  }

  .button {
    margin: 1rem;
    border: 1px dashed red;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
3

Thanks, much appreciated. I had to add calc(100% - X), where X was the height of my navbar + tab bar combined to make it not overflow.

Thanks again.

Curious: Do you hate a lot of the Ionic components like grid? I find a number of them overly complex compared to plain HTML+CSS!

Cheers

4

If at all possible, what I would instead do there is stuff that into an <ion-header> and get it out of <ion-content>, which offloads the work of adjusting for its height (and making it sticky) onto Ionic.

I used to aggressively hate Events (until they died). I don’t know if you’re the same poster that was discussing that with me in detail (I think you at least had a similar-sounding handle). I also wasn’t a huge fan of the NavController and was happy when it was more-or-less dumped in favor of the underlying framework router. I don’t hate Ionic’s grid, per se, because I don’t think it encourages spaghetti the same way Events did. I just find ordinary CSS grid more straightforward and expressive.

Most of the other complaints I have with Ionic components tend to fall under the general umbrella of “sometimes warty, but I appreciate that they did what appears to be a good job of dealing with lots of stuff I wouldn’t even know to think of”. Regular readers of this column are probably familiar with my reluctance to rely much on lifecycle events, and when I do use them, I tend to stick to the Angular ones.

5

Yep - that’s me again. All good points, mostly agree with you apart from the nav router + events, as we’d previously discussed.

Each to their own though! thanks again.