Grid-card: custom-button-cards are not centered

[Nic0205]

Hey there,

I’ve got a problem with the grid card. I have 4 custom-button-cards that I want to display in a grid card. But there is a lot of space at the right side and nearly no margin/space at the left:

this is the simplified code:

type: grid
cards:
  - type: custom:button-card
    show_icon: true
    aspect_ratio: 1/1
    show_label: true
    styles:
      card:
        - height: 220px
        - width: 150px
  - type: custom:button-card
    show_icon: true
    aspect_ratio: 1/1
    show_label: true
    styles:
      card:
        - height: 220px
        - width: 150px
  - type: custom:button-card
    show_icon: true
    aspect_ratio: 1/1
    show_label: true
    styles:
      card:
        - height: 220px
        - width: 150px
  - type: custom:button-card
    show_icon: true
    aspect_ratio: 1/1
    show_label: true
    styles:
      card:
        - height: 220px
        - width: 150px
columns: 2
square: true

If I change
width: 150px
to
min-width: 150px

I get a centered version - but the width is much wider:

Do you have a hint for me, how I could achieve it that the cards do not get wider but are centered in the grid?

Cheers, Nic

[septillion (Timo)]

You can try to add blank cards for the blank space (aka, left, right and middle).

[Nic0205]

Hi,

it’s driving me crazy. I tried it - but it gives me curious result:

type: grid
cards:
  - type: custom:button-card
    show_icon: true
    show_label: true
    name: left
    styles:
      card:
        - height: 220px
        - width: 10px
  - type: custom:button-card
    show_icon: true
    show_label: true
    name: card1
    styles:
      card:
        - height: 220px
        - width: 150px
  - type: custom:button-card
    show_icon: true
    show_label: true
    name: middle
    styles:
      card:
        - height: 220px
        - width: 10px
  - type: custom:button-card
    show_icon: true
    show_label: true
    name: card2
    styles:
      card:
        - height: 220px
        - width: 150px
  - type: custom:button-card
    show_icon: true
    show_label: true
    name: right
    styles:
      card:
        - height: 220px
        - width: 10px
columns: 5
square: false

[suxlala]

For this you will need card-mod
Then you can justify the cards as centered.

type: custom:mod-card
style:
  .: |
    ha-card {
      background-color: rgba(0,0,0,.3);
    }
  hui-grid-card$: |
    :host([square]) #root {
      justify-items: center !important;
    }
card:
  type: grid
  cards:

[Nic0205]

Hi @suxlala

Thank you for your post

I tried it and now another scary effect occurs. The Cards are now centered in the middle of the screen, not of the grid card.

it looks like this:

Could you help me once again?

[suxlala]

@Nic0205 I think for your cards this code should do the trick:

type: custom:mod-card
style:
  .: |
    ha-card {
      background-color: transparent;
    }
  hui-grid-card$: |
    #root {
      justify-items: center !important;
    }
card:
  type: grid
  cards:
    - type: custom:button-card
      show_icon: true
      show_label: true
      name: card1
      styles:
        card:
          - height: 220px
          - width: 150px
    - type: custom:button-card
      show_icon: true
      show_label: true
      name: card2
      styles:
        card:
          - height: 220px
          - width: 150px
  columns: 2
  square: false

If you are centering them you no longer need 5 columns and the additional cards.

[Nic0205]

Thank you - now it works great;-)