Cards in either a Grid or a Horizontal stack take up the entire width of their column, which is elegant and makes sense in most applications.
But has anyone come up with a way of having cards only take up the space they require to display their contents?
In CSS, this would be expressed as width: fit-content.
It seems to me a solution would be to use card-mod to add CSS to either a Grid or a Horizontal stack container. But I am open to any suggestions.
If anyone is interested, I ended up finding a solution for this.
type: custom:mod-card
style:
hui-horizontal-stack-card$: |
#root {
display: inline-block !important;
}
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- condition: state
entity: switch.amplifiers_group_c_socket_1
state: "on"
card:
type: markdown
content: >-
<img
src="https://community-assets.home-assistant.io/original/4X/8/d/f/8df951532473a630b4dcebe75b86658b76968b53.png"
width="22" alt="Home Assistant Community"><br />Home Assistant
card_mod:
style: |
:host {
float: left;
width: fit-content;
margin: 0 12px 0 0;
text-align: center;
font-size: 10px;
}
- type: conditional
conditions:
- condition: state
entity: switch.amplifiers_group_c_socket_1
state: "on"
card:
type: markdown
content: >-
<img
src="https://community-assets.home-assistant.io/original/4X/8/d/f/8df951532473a630b4dcebe75b86658b76968b53.png"
width="22" alt="Home Assistant Community"><br />Home Assistant
card_mod:
style: |
:host {
float: left;
width: fit-content;
margin: 0 12px 0 0;
text-align: center;
font-size: 10px;
}
- type: conditional
conditions:
- condition: state
entity: switch.amplifiers_group_c_socket_1
state: "on"
card:
type: markdown
content: >-
<img
src="https://community-assets.home-assistant.io/original/4X/8/d/f/8df951532473a630b4dcebe75b86658b76968b53.png"
width="22" alt="Home Assistant Community"><br />Home Assistant
card_mod:
style: |
:host {
float: left;
width: fit-content;
margin: 0 12px 0 0;
text-align: center;
font-size: 10px;
}
Have you looked at the custom:layout card?
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 1fr 1fr 1fr
margin: 0px 0px 0px 0px
cards:
- xxxx
You can even define the column width using %
grid-template-columns: 30% 30% 40%
Thanks! That looks way easier than what I hobbled together. I will check it out next time.