I would like to have a coontainer card with two rows of buttons, because with more than 4 button it doesnt fit on the screen, but I cant figure how to do it.
I tried with grid instead of horizontal-stack but when I change it button become super spaced and the card is super large.
Can anyone point me in the right direction ?
in this specific card, I would like the 5th entity to be on a second row, or 3-2 or 3-3, just not more than 4 max
type: custom:button-card
template: container
color: '#FCD299'
name: Chambre Dom
styles:
card:
- width: 545px
custom_fields:
buttons:
card:
type: horizontal-stack
cards:
- entity: light.lumieres_lit_dom
name: Lumières lit
template: standard
icon: null
type: custom:button-card
styles:
card:
- width: 90px
- height: 68px
state:
- value: 'on'
color: Gold
- value: 'off'
color: SlateGrey
- entity: light.suite_parentale_lumieres_principales
name: Plafonnier
template: standard
icon: null
type: custom:button-card
styles:
card:
- width: 90px
- height: 68px
state:
- value: 'on'
color: Gold
tap_Action: toggle
- value: 'off'
color: SlateGrey
tap_Action: toggle
- entity: climate.mysa_1facb8
template: bigtemp
name: HVAC
type: custom:button-card
style:
top: 40%
left: 20%
- entity: climate.mysa_d37cb4
template: bigtemp
name: PLINTHE
type: custom:button-card
style:
top: 40%
left: 20%
- entity: climate.mysa_d37b98
template: bigtemp
name: Walk-In
type: custom:button-card
style:
top: 40%
left: 20%