Need help with layout-card (grid)

Configuration Frontend
, ,
1

Hello everyone,
I’ve been struggling for weeks with layout-card and its configuration because I can’t seem to position the cards the way I want. I’ve tried every possible way, but I’m definitely missing something. I would like to achieve something similar to what is depicted in the first image (desktop) and make the dashboard responsive as shown in the second image (mobile). I kindly ask for your help. Below is the latest version of the YAML, but it’s just one of the many attempts I’ve made.

It would be very helpful if someone could also share something similar to have at least a starting point.

Thank you!

Desktop:

desktop
desktop2304×662 51.6 KB

Mobile:

mobile
mobile650×1101 42 KB

This is the initial yaml related to the first row only

grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr 1fr
grid-template-areas: |
  "1 2 4 "
  "1 3 5 "
mediaquery:
  "(max-width: 600px)":
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr
    grid-template-areas: |
      "1 1"
      "2 3"
2

Try this:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr
grid-template-rows: 1fr 1fr 1fr
grid-template-areas: |
  "1 1 1 1 2 2 2 2 4 4 4 4"
  "1 1 1 1 3 3 3 3 5 5 5 5"
  "6 6 6 7 7 7 8 8 8 9 9 9"
mediaquery:
  "(max-width: 600px)":
    grid-template-columns: 1fr 1fr
    grid-template-rows: 1fr
    grid-template-areas: |
  "1 1"
  "2 3"
  "4 4"
  "5 5"
  "6 6"
  "7 7"
  "8 8"
  "9 9"

When referring to cell names for actual cards you just need to use single digit cell name and it will span across multiple grid cells as defined above.
Obvilusly if you would like to add some margins around cards (like in your diagram) then it will make things more complex; you either need to apply some CSS formatting of cells to add padding, or add dedicated rows/columns in the grid to handle spape between cells.

1 Like
3

I wonder is it possible to shorten it to
grid-template-columns: 1fr
?

2 Likes
4

maybe

grid-template-columns: repeat(12)

However i wonder what happens with row 3

initially there is row 1 +2 = 3 columns , row 3 = 4 columns , and area1 spans 2 row

So my firstt though is also cording to Mirek, unless one is going to use “span”, Area 1 , and the ODD columns mess it up othervice

it’s an odd grid

Edit: and if there is no specific reason then use , grid-template-rows: auto

2 Likes
5

Perhaps…I’m not css expert, just sharing my personal experience :slight_smile:
Personally I do not use frames in my grids, but rather percentage - this is due to very uneven width of cells. Then each need to be defined explicitly.

1 Like
6

Hey! First of all, I would like to thank you for the great support you have provided! The suggestion from mirekmal was very helpful and helped me understand that I was on the right track but might have been missing something! Anyway, the images were just an example. At the moment, I don’t need to include specific borders or margins; that will probably be done in a later step! Now I can finally enjoy my dashboard thanks to you all! Super!

This is the final code:

grid-template-columns: repeat(12)
grid-template-rows: auto
grid-template-areas: |
  "1 1 1 1 2 2 2 2 4 4 4 4"
  "1 1 1 1 3 3 3 3 5 5 5 5"
  "6 6 6 7 7 7 8 8 8 9 9 9"
mediaquery:
  "(max-width: 600px)":
    grid-template-columns: repeat(2)
    grid-template-rows: auto
    grid-template-areas: |
  "1 1"
  "2 3"
  "4 4"
  "5 5"
  "6 6"
  "7 7"
  "8 8"
  "9 9"
1 Like