Implementing a design in Ionic

#1

Hi everyone,

Not to much experience with ionic (and app development) in general but I would love to get a push into the right direction regarding the following question;

How would you guys try to implement the design as supplied (cardview) in Ionic 4?
I’ve tried working with grid but I can’t get it to work the way I want it. The merging columns and rows are essential (I guess) but I do not see (or find) a way to accomplish this…

Thanks for reading my post!

#2

See:

#3

But CSS grid isn’t supported?
I know css grid but don’t know how to overlap grid area’s into multiple columns with ionic grid?

#4
It is same as bootstrap. 
<ion-card>
<ion-row>
<ion-col col-2>Avatar<ion-col>
<ion-col col-6>
<ion-row>
<ion-col col-10>
<b>Marie Winter</b>
</ion-col>
<ion-col col-2>
2
</ion-col>
</ion-row>
<ion-row>
<ion-col col-2>
2
</ion-col>
<ion-col col-2>
2
</ion-col>
<ion-col col-2>
2
</ion-col>
<ion-col col-2>
2
</ion-col>
<ion-col col-2>
2
</ion-col>
<ion-col col-2>
2
</ion-col>
</ion-row>
</ion-col>
<ion-col col-4>
Register result button center right
<ion-col>
</ion-row>
 </ion-card>

Use CSS to change the alignments and style.