It says: CSS Grid is not in use on this page
I don’t know if it is a hack, I am crap at css, but it feels a bit hacky to me. But it seems to work fine, though spacing on larger screens is a bit off. They don’t align like they do on a small screen.
I’ll see if I can replicate your button with a layout, might be a bit as I’m transitioning into the ratio versions.
Going to try that as well, but just replacing my code with aspect ratio’s make it really look bad 
but no worries. My temporary solution will work perfectly fine, my wife won’t notice the difference which is most important. She already has to cope with my urge of changing the setup every month or sometimes even do radical changes in a week 
.
Once I find the time to get to it I definitely will switch to better solutions like the aspect_ratio. But my css is a massive mess, so I will probably do that at the same time.
Off to bed now, long day ahead. Thnx btw!
FYI aspect ratio appears to not work with layouts, or at least the icon_state layout.
Just wanted to send a BIG thank you to everyone who has helped me these last several weeks, including but certainly not limited to @RomRider, @petro, and @Mariusthvdb. Without your help, I wouldn’t have made anywhere near the same progress in improving my buttons, graphical complexities, and overall layout. Button card has come a long way in such a short time and it continues to inspire me to make “all the things” look and function better. I may have even learned a thing or two (or three).
So thank you, everyone!
Gratuitous before (left) and after (right) screenshots below.
Fan icon (right side) now spins when the fan is on. Low/Medium/High buttons are hidden when the fan is off.
4 Likes
Things below will work with the version that I’ll publish later today (1.10.1). Waiting on another PR in a library.
That’s the result with the new config below (I didn’t change much). Note that I used the template feature, but you can change to use anchoring if you prefer:
button_card_templates
light_button_style:
aspect_ratio: 1/1
show_label: true
show_state: true
size: 30%
styles:
card:
- border-radius: 12px
- --paper-card-background-color: var(--homekit-white)
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- padding-left: 10px
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content min-content
img_cell:
- justify-content: start
- align-items: start
icon:
- height: auto
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
Also you can’t specify a height or a width if you specify aspect_ratio, it will not work 
Regarding the size: xx%: before, if you had specified a height on the card, the icon would be cropped as it wasn’t scaling based on the height of the card and you’d have to use size: xx% to resize it. Now it’s fixed in 1.10.0, it will scale both based on the width AND height of the card.
Maybe it was not clear in my release notes, but as you I’m not a native english speaker, I’m french
I can’t reproduce this issue, can you share your config please?
You should set a blank-card on the row to fill an empty space yes. However, if you set 4 buttons on the row for example, it will take the full width if you use aspec_ratio on the 4 buttons. And will scale on all your devices.
I don’t have this problem. Make sure you use the latest release and have cleared your cache. Also make sure you don’t specify a width or a height.
1 Like
using this template:
button_picture_family:
size: 70%
show_state: false
show_label: false
show_name: false
show_entity_picture: true
color_type: card
aspect_ratio: 1/1
tap_action:
action: more-info
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
# - width: 105px
# - height: 105px
entity_picture:
- border-radius: 12px
renders this (various crops):
and no width height in the card configs either.
It is remarkable this is happening only when using the pictures, because the posts above use .png images and the aspect ratios is preserved.
about the width of the ‘grid’: the blank-card takes more space than needed (I only want the buttons not to touch the outer edge), so I tried this now:
horizontal-filler:
color_type: blank-card
styles:
card:
- width: 3px
which seems to work alright.
Here’s the anchor. The aspect ratio isn’t doing anything. If i remove the layout it appears to partly work, but when I squeeze the browser, the button elongates. If I fully remove all the styles, the buttons work as expected.
# 105 x ? GLOW - THEME - OVERVIEW COUNTER - 3 BUTTONS PER ROW
cb_overview_counters: &cb_overview_counters
type: custom:button-card
layout: icon_state
color: auto
aspect_ratio: 1/1
show_state: false
show_name: true
show_label: true
label_template: >
var i;
var status = entity.state;
var entities = entity.attributes.entity_id;
var count = 0;
for (i = 0; i < entities.length; i++) {
var state = states[entities[i]].state;
if (state === 'on') {
count += 1;
}
}
var phrase = (count === 1 ? ' light ' : ' lights ');
return (status === 'on' ? count.toString() + phrase + status : status);
styles:
grid:
- grid-template-rows: 42px auto 42px
- grid-template-columns: 42px auto
card:
- border-radius: 15px
- margin: 8px 0px 0px 0px
- padding: 0px 0px
icon:
- align-self: end
- height: 30px
- width: 30px
name:
- justify-self: start
- padding: 0px 10px
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- text-transform: capitalize
- font-weight: bold
- align-self: end
- justify-self: start
- padding: 9px 10px
lock:
- align-items: flex-end
state:
- value: "on"
styles:
card:
- --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
name:
- color: white
state:
- color: white
label:
- color: white
tap_action:
action: toggle
hold_action:
action: more-info
Aspect ratio works in both of your case on my setup (FF, Chrome and Safari) with the latest dev version.
Could you please replace button-card.js with this file (it’s from the next upcoming release), test again and report back (clear your cache or use the /customcards/ endpoint to serve your cards):
https://raw.githubusercontent.com/custom-cards/button-card/dev/dist/button-card.js
1 Like
@RomRider yes I figured that size/heigth/width and aspect_ratio do not play so nice. Par tout facon, I’m going to rework everything again anyways because I’d like to make use of the new config options. Merci beaucoup (no French isn’t my native language either haha)
1 Like
Sorry for the latest slightly bugged version… 
FIXES
- Restore padding for ha-card when aspect_ratio is used
- Fixes various CSS issues
-
Fix a regression introduced in 1.10.0 when<-- will be fixed in 1.10.2entity_idwas equal to entity in theservice_data
1 Like
nope:
maybe even worse , see last button left with the moon icon.
family buttons show identical, with a wider background left and right than top bottom.
(this is the dev version, not the release you posted after that, wil test also)
update
bingo! this version does change the setup:
and
nice!
family shows square now too 
2 Likes
just to post separately:
this is nearing perfection now!
the way I create all my button configs is using the aspect_ratio: 1/1 in the templates (of course for square buttons…) and have the horizontal filler template to keep the buttons from touching the edges of the display. Also I use the blank card to keep ‘grids’ together, and have eg a set of 7 buttons on 2 rows have the buttons in the identical size showing top 4 and bottom 3 buttons.
very nice, and I wonder if we even need an extra grid card as suggested before, to replace the Tiles card.
2 sets of buttons:
8: 2 stacks of 4
3 1 stack of 3
cropped down revealing yet another set of buttons:
all beautifully arranged. Desktop And Mobile!
Thanks @RomRider !
1 Like
keep us informed, my ‘Homekit’ buttons are a bit scrambled indeed… would like to get the Homekit feel back, (all aligned on the left side).
nothing too bad, just the icon position in the middle now. Might be very easy and add a padding left to the icon?
Change margin-left: 10px to margin-right: 50px for a quick fix. And align everything at the start.
Oh and if you used my code in the past opacity must move to the card style.
I will work it out this week to use the aspect_ratio instead.
for icon? or for all (icon, name, state, label, img_cell)
just tested this:
img_cell:
- justify-content: start
- align-items: start
and that does the trick. All aligned nicely!
Ah srry, in the img-cell area. That is just the icon indeed. Text should all be fine still.
img_cell:
- align-self: start
- text-align: start
- margin-right: 60px
(Srry I said 50px before but I meant 60px) if you have 4 buttons in a row, meaning smaller buttons, you could use 45px instead). Just keep in mind that it doesn’t align the same on larger screens as on smaller screens if you do not use a fixed width/height.
Yes!!
I have built on that a bit further, to include the styles and some templates:
button_light:
label_template: >
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
color: auto-no-temperature
size: 30%
aspect_ratio: 1/1
show_state: true
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- border-radius: 12px
# - width: 105px
# - height: 105px
- --paper-card-background-color: rgb(255, 251, 239)
- padding-left: 5px
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
label:
- color: gray
- font-size: 11px
- font-family: Helvetica
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
name:
- color: black
state:
- color: gray
label:
- color: red
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.6
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: black
name:
- color: black
state:
- color: black
id: off-icon
- value: 'unavailable'
styles:
card:
- opacity: 0.4
- color: grey
- --paper-item-icon-color: grey
label:
- color: rgba(0, 0, 0, 0.0)
did a bit of finetuning with the paddings, because I felt it took too much space, for some longer names.
my lights now use this only (using a grid of 4 lights):
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: custom:button-card
template: button_light
name: Porch
icon: 'mdi:door-open'
entity: light.porch_outdoors
- type: custom:button-card
template: button_light
name: Frontdoor
entity: light.frontdoor
state:
- value: 'on'
id: on-icon
icon: 'mdi:door-open'
- value: 'off'
id: off-icon
icon: 'mdi:door-closed'
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
template: horizontal-filler
so clean.
2 Likes
what are those dog buttons even doing? Just wondering