Nic0205
(Nic0205)
June 14, 2021, 1:28pm
1
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
You can try to add blank cards for the blank space (aka, left, right and middle).
Nic0205
(Nic0205)
June 15, 2021, 8:42am
3
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
(Suxlala)
June 15, 2021, 11:51pm
4
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
(Nic0205)
June 16, 2021, 7:39am
5
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
(Suxlala)
June 16, 2021, 5:11pm
6
@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.
1 Like
Nic0205
(Nic0205)
June 17, 2021, 6:42pm
7
Thank you - now it works great;-)