Hello community, I need your help:
I would like to create a dashboard and just can’t manage to create a suitable layout. It should mainly consist of custom:butto-cards. Most of them are squares with sides of the same length. Others are bit bigger and some also as rectangles, in double length.
Here is an image I created with an image editor of how I would like the layout to look:
(Don’t be surprised, these are all screenshots from 4 or 5 cards, which I have only duplicated, as this is purely about the layout. Later I want to replace these cards with others, in the same design, but with smarter features, like color and logo based weather states, entity status based on colors, and so on.)
I first tried to work with grid-cards. 5 pieces one below the other with 8 columns each. Then I tried various layouts with the layout card. But no matter what I do, the bottom rows of cards are always too deep, so I have to scroll down. but I want to be able to see the entire view on the tablet display.
Here is an example with a grid layout with 5 grid cards one below the other:
grid-template-columns: auto
grid-template-rows: auto
grid-template-areas: |
"a a a a a a a a"
"b b b b b b b b"
"c c c c c c c c"
"d d d d d d d d"
"e e e e e e e e"
with this code it looks like this:
Ive also tried to create a place for each card to set:
grid-template-columns: repeat(8)
grid-template-rows: auto
grid-template-areas: |
"a b c d e f g h"
"i j k l m n o p"
"q r s t u v w y"
"a1 b1 c1 d1 e1 f1 g1 h1"
"i1 j1 k1 l1 m1 n1 o1 p1"
With this code it looks like this:
However, you can see that the bottom fifth row disappears and I have to scroll to see it
To spare you all my failed attempts, I’ll ask you a simple question: What’s the best way to proceed? Do I already specify my layout in the dashboard page setting? or would I rather split all rows into individual layout cards?
What am I doing wrong?
If I can solve this problem with your help, you will make someone very happy on his way to his dashboard of his dreams =)
Thank you!!