Check this decluttering template as an example:
decl_horizontal_stack:
default:
- VALUE_WIDTH_1: 50%
- VALUE_OVERFLOW_VISIBLE: true
- OBJ_KEEP:
background: false
box_shadow: false
margin: false
outer_padding: false
border_radius: false
card:
type: custom:stack-in-card
keep: '[[OBJ_KEEP]]'
mode: horizontal
cards: '[[CARDS]]'
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child {
width: [[VALUE_WIDTH_1]];
flex: auto;
}
div#root > :last-child {
width: calc(100% - [[VALUE_WIDTH_1]]);
flex: auto;
}
.: |
ha-card {
box-shadow: none;
{% if [[VALUE_OVERFLOW_VISIBLE]] == true %}
overflow: visible !important;
{% endif %}
}
Using the template:
type: vertical-stack
cards:
- type: custom:decluttering-card
template: decl_horizontal_stack
variables:
- CARDS: &ref_cards
- type: entities
entities:
- entity: sensor.cleargrass_1_temperature
name: Indoor
- type: custom:bar-card
entities:
- entity: input_number.test_level_1
positions:
icon: 'off'
name: 'off'
- type: custom:decluttering-card
template: decl_horizontal_stack
variables:
- CARDS: *ref_cards
- VALUE_WIDTH_1: 60%
- type: custom:decluttering-card
template: decl_horizontal_stack
variables:
- CARDS: *ref_cards
- VALUE_WIDTH_1: 70%
- type: custom:decluttering-card
template: decl_horizontal_stack
variables:
- CARDS:
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: custom:mini-graph-card
entities:
- entity: sensor.cleargrass_1_co2
name: CO2
height: 250
show:
state: true
name: true
icon: false
labels: false
points: false
- VALUE_WIDTH_1: 65%
- OBJ_KEEP:
background: false
box_shadow: true
margin: false
outer_padding: false
border_radius: false
- type: entities
entities:
- sun.sun
- type: custom:decluttering-card
template: decl_horizontal_stack
variables:
- CARDS:
- type: custom:hui-element
row_type: sensor-entity
entity: sensor.cleargrass_1_temperature
name: Indoor
- type: custom:slider-entity-row
entity: input_number.test_number
full_row: true
- VALUE_WIDTH_1: 40%
- entity: sensor.cleargrass_1_co2
Surely the template does not cover all possible needs. At least it gives you an example of customizing a width.