Hello,
I am so stuck in creating a layout which I thought was going to be easy peasy.
I’m am (have) created a dashboard view that by principle is built out of 3x3 cards.
Next step I wanted to combine the 2x2 cards in the upper left corner to make it look like like this:
I can’t get it done! Can someone please push me into the correct direction?
To avoid conflicts with the next step I have in mind, eventually I want to stack multiple 3x3 grids. Maybe some will also have the bigger 2x2 card. Something like this:
In the 2x2 card I eventually want to create a custom card with multiple (dynamic) content. Like weather, room temperature and humidity, etc.
I have pasted my current code below but I think it’s not much use as a base. I’m pretty sure I will have to use more advanced options like layout-card or custom-card.
I would really appreciate a push into the right direction.
views:
- title: 3 x 3
path: Nathan
cards:
- card_mod:
style: |
ha-card {
color: red;
}
square: true
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.living_room
show_state: false
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.ikea_5
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.ikea_4
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.dining
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.ikea_2
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.ikeac_7
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.ikea_6
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.ikeac_8
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.ikea_1
columns: 3