Set horizontal stack column widths?

[native knot]

Code below, I'm trying to set up a 3-column horizontal stack where the first two columns are eg 20% width and the 3rd column is the remaining 60%, but I can't work out what I should be modifying. I tried setting the 1st to 20% and last to 60% but it just makes them all small...

This is specifically for use with lovelace-wallpanel https://github.com/j-a-n/lovelace-wallpanel in case that makes any difference

<etc> = personal details redacted

`type: horizontal-stack
card_mod:
style:
hui-horizontal-stack-card $: |
div#root > :first-child > * {
width: 20%;
flex: auto;
}
div#root > :last-child > * {
width: 60%;
flex: auto;
}
cards:

• initial_view: listWeek
  type: calendar
  entities:
  • <etc>
    title: Family
• initial_view: listWeek
  type: calendar
  entities:
  • <etc>
    title: Racing
• show_state: true
  show_name: true
  camera_view: auto
  type: picture-entity
  entity: <etc>
  grid_options:
  columns: 48
  rows: auto`

Two other approaches I've tried:

hui-horizontal-stack-card $: | div#root { display: flex; } div#root > *:nth-child(1) { flex: 0 0 20%; } div#root > *:nth-child(2) { flex: 0 0 20%; } div#root > *:nth-child(3) { flex: 0 0 60%; }

hui-horizontal-stack-card $: | div#root { display: flex; } div#root > *:nth-child(1) { flex-grow: 2; } div#root > *:nth-child(2) { flex-grow: 2; } div#root > *:nth-child(3) { flex-grow: 6; }

[scenic wagon]

IMO, you'll have better success using the layout-card. Once installed, all you would need to do is replace the type: horizontal-stack (and all the card_mod) with: ```yaml
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 20% 20% 60%
grid-template-rows: auto

Don't mind this screenshot looking ugly; it is just something I modified for demonstration.

[native knot]

Thanks, I’ll give that a try 🙂