Center cards within the columns of a grid card

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!

Is this the sort of thing?

image

If you use a theme that removes card borders, the “padding” buttons disappear.

image

type: vertical-stack
cards:
  - type: thermostat
    entity: climate.hallway
  - type: horizontal-stack
    cards:
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: none
        hold_action:
          action: none
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: none
        hold_action:
          action: none
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        show_state: false
        entity: input_boolean.heating_boost
        name: Boost
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: input_boolean.heating_eco
        name: Eco
      - show_name: false
        show_icon: true
        type: button
        tap_action:
          action: none
        entity: sensor.living_room_motion_sensor_temperature
        show_state: true
        name: Living room
        icon: mdi:sofa
      - show_name: true
        show_icon: true
        type: button
        tap_action:
          action: toggle
        entity: input_boolean.heating_on_off
        name: On/Off
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: none
        hold_action:
          action: none
      - show_name: false
        show_icon: false
        type: button
        tap_action:
          action: none
        hold_action:
          action: none

Hi mate, thanks for your reply.

Unfortunately this is not what I meant.

Let me explain better.

Here is what I have:

What I drew in red are the columns of my grid (works with a horizontal stack as well).
And as you can notice, my buttons are not centered in those columns.
I can add columns on the left and right, this won’t change anything.

So I was wondering if, in the card_mod, we can add some tricks so it will center the card into the column

1 Like

@g0m did you ever find a solution to this? I am looking for a similar solution