I am experimenting with a small detailed grid of tiles in ionic on mobile. Essentially a rough design wireframe looks like this:
A few words on what I have drawn. Each item can be described a thumbnail, a title and an array of 'tiles'. Each tile should ideally appear as a fixed size item. Either embossed 3D or flat : whatever works. On each tile, there will be a number of very small accurately positions components: a number, an icon, some text, and optionally another icon / or more likely a very small image or a linear guage (just represented by 3 values - green / orange / red. Not a real guage).
I have tried using ion-card, but ion-grid does not work inside a card. And efforts to lay the items out with ion-grid have not worked either. I have found it is impossible to force the items to come close enough together. As the elements inside each column come close to filling the space, the grid expands and /or wraps. Since I'm working with dynamic data, it's never going to work reliably.
A really basic starting point that does work just describing a single tile :
<ion-row>
<ion-col class="ion-text-center" no-padding>
<ion-label>
<h5 card-body-text style="font-size: 0.8rem;" class="device-id-text">
TEMP
</h5>
<ion-text color="dark">
<h4 item-title class="device-name-text" style="font-size: 1.5rem;">
<ion-text color="primary"><span> {{ item.lastTemp}} </span> </ion-text>
</h4>
</ion-text>
</ion-label>
</ion-col>
As you can see the basic structure is kind of there. But it heavily relies on the content fitting inside the column for it to work. I can add an ion-icon too but that actually looks, well, not great. It's not really a good solution!
I can't figure out how to create a 'tile' and get the requisite elements into it such that they will look something like the desired outcome. How can this be accomplished in ionic. I am on ionic 4. If upgrading to ionic 5 or 6 would make this easier to do, then that could be part of the answer...