Custom Layout Card - Grid layout. Please help

Configuration Frontend
21

I am trying to build a simple dashboard but struggling with the layout design. One of my camera is wide angle and it needs bit of a space. I am using layout card. The first two columns (weather and camera) works great but not sure how to align the bottom room cards. The moment add cards to column 3, it extends with the camera card.

grid-template-columns: 10% 30% 50% 10%
grid-template-rows: auto
grid-template-areas: |
“h1 h2 h3 h4”

this is what I want to create:

image
image1461×1110 69.7 KB

I tried to separate the last two rows for the room cards with custom-layout but no luck.

Any suggestions please? Thanks

22

try something lke that:

type: custom:layout-card
layout_type: grid
layout_options:
  grid-template-columns: 5% 33.3% 33.3% 33.3% 5%
  grid-template-rows: auto auto auto
  grid-template-areas: |
    "s1 weather camera camera s2"
    "s1 room1 room2 room3 s2"
    "s1 room4 room5 room6 s2"

This assumes you want to have each card to take 30% of page width and have small margins left on left and righ side of the screen. In grid definition these are represented by s1 and s2. Do not forget to put into your actual cards information about their placement in respective cells.

cards:
  - type: your camera card type
    view_layout:
      grid-area: camera
    . . .
23

Layout_option didn’t work for me so I changed back to layout: and it worked a like charm :slight_smile:
I also made a few minor adjustments to the column percentages and everything seems to work as I expected. Thank you Mirek.

Working code for me:
type: custom:grid-layout
layout_type: grid
layout:
grid-template-columns: 5% 30% 30% 30% 5%
grid-template-rows: auto auto auto
grid-template-areas: |
“s1 weather camera camera s2”
“s1 room1 room2 room3 s2”
“s1 room4 room5 room6 s2”