Hi guys,
I am struggling a bit with my cards.
I have some cards with a fixed size and I am struggling to have them centered in the columns of my grid.
To be more specific, here is what I have (the 3 cards for “Portail” are aligned on the left of the columns and not centered compared to the "Alarme"full-width card):
And here is what I am looking for (all the card are centered, I had to fine tune some margin to get that result which is sloppy imho):
My code is the following for that grid:
type: grid
columns: 1
square: false
cards:
- type: custom:button-card
name: portail
styles:
card:
- height: 50px
- padding-top: 30px
- border: none
- background: none
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- text-transform: lowercase
- font-size: 25px
- letter-spacing: 0.7em
- square: false
type: grid
cards:
- entity: binary_sensor.ouvertureportail
icon: mdi:gate
name: p o r t a i l
size: 40%
tap_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.double_relay_switch_2x1_5kw_6
data: {}
styles:
img_cell:
- padding-left: 25px
- justify-content: start
card:
- max-width: 120px
- height: 120px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- color: rgba(var(--my-green),0.8)
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
state:
- justify-self: start
- font-weight: bold
- font-size: 12px
- opacity: 0.6
- padding: 0 15px 5px
state:
- value: 'on'
icon: mdi:gate-open
styles:
icon:
- color: rgb(var(--my-red)
- animation: blink 2s ease infinite
card:
- background-color: rgba(var(--my-red),0.2)
- box-shadow: var(--my-box-shadow)
card_mod:
class: soft-ui
style: |
ha-card {
--primary-text-color: rgb(var(--my-grey));
}
show_state: true
type: custom:button-card
- entity: binary_sensor.ouvertureportail
icon: mdi:walk
name: p i é t o n
size: 30%
tap_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.jardinportail_2
data: {}
styles:
img_cell:
- padding-left: 25px
- justify-content: start
card:
- max-width: 120px
- height: 120px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- color: rgba(var(--my-blue),0.8)
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
state:
- justify-self: start
- font-weight: bold
- font-size: 12px
- opacity: 0.6
- padding: 0 15px 5px
card_mod:
class: soft-ui
style: |
ha-card {
--primary-text-color: rgb(var(--my-grey));
}
show_state: true
type: custom:button-card
- entity: binary_sensor.ouvertureportail
icon: mdi:car
name: t o t a l e
size: 40%
tap_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.jardinportail
data: {}
styles:
img_cell:
- padding-left: 25px
- justify-content: start
card:
- max-width: 120px
- height: 120px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
icon:
- color: rgba(var(--my-blue),0.8)
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
state:
- justify-self: start
- font-weight: bold
- font-size: 12px
- opacity: 0.6
- padding: 0 15px 5px
card_mod:
class: soft-ui
style: |
ha-card {
--primary-text-color: rgb(var(--my-grey));
}
show_state: true
type: custom:button-card
columns: 3
If yo guys gave any idea, I would be gateful!