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.
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
. . .
Layout_option didn’t work for me so I changed back to layout: and it worked a like charm
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”
HI All, before I spend loads of time doing grids with in grids with in grids, Is Grids even the most suitable layout tool for what I am trying to create below:
