Single page layout

Configuration Frontend
1

I am pulling my hairs out a bit. What I am trying to achieve is to have a dashboard that is 1 page with a grid on it that adapts to the viewport (100%). In order to do so I have added a panel and in that panel I add a grid layout card. The grid layout card is currently styled as below:

grid-template-rows: repeat(4, auto)
grid-template-columns: repeat(6, 1fr)
grid-template-areas: |
  "blok11 blok12 blok13 blok14  blok15 blok16"
  "blok21 blok22 blok23 blok24 blok25 blok26"
  "blok31 blok32 blok33 blok34 blok35 blok36"
  "blok41 blok42 blok43 blok44 blok45 blok46"
display: grid
gap: 0px
width: 6fr
height: 4fr

On my laptop the columns work out quite nicely, but the rows extend to outside of the viewport. I tried a lot of different tricks, but cannot get the heigth right. Is there anyone who can point me to the right CSS to auto fit the heigth too?

Capture
Capture1920×922 74.8 KB

2

Have you checked out layout-card?

3

I am using the layout-card (custom:grid-layout)

4

Sorry… read your post incorrectly. I use the same setup and manually control the card height either with padding or margins. Now I’m curious if there is an answer as well.

5

Maybe try
grid-template-rows: repeat(4, 1fr)
or
grid-template-rows: repeat(4, 25%)

It could also be that if you add cards that are a fixed height, like the ones on the right, the whole layout simply won’t fit in terms of height anymore.