Single page layout

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?

Have you checked out layout-card?

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

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.

Maybe try
grid-template-rows: repeat(4, 1fr)
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.