Horizontal in Vertikal stack?

Hello everybody,
I have a question. Is it possible to put a horizontal stack in a vertical stack? My attempts with my own card have always failed. (I have to say that I also do very hard with the correct alignment of the code)
I currently have 7 thermostats in my HA. Each thermostat is in its own card. So far so good. Now, however, I want the last card in the first row to be displayed as the last (see picture). Is this somehow possible. Would it also be possible to split the 7 cards into 3 rows? I currently use the lovelcae ui mode.

Looking forward to your answers.

Here is my code for the view:

    cards:
      - type: horizontal-stack
        cards:
          - type: 'custom:mini-graph-card'
            align_header: left
            align_icon: left
            entities:
              - entity: sensor.wandthermostat_humidity
                index: 0
            color_thresholds:
              - value: 59
                color: '#EE0505'
              - value: 58
                color: '#FBA309'
              - value: 57
                color: '#03F630'
            hours_to_show: 24
            points_per_hour: 1
            animate: true
            hour24: true
            extrema: true
            name: Luftfeuchtigkeit Kinderzimmer
            show:
              points: true
              fill: fade
              labels: true
      - type: horizontal-stack
        cards:
          - entity: climate.schlafzimmer
            type: thermostat
      - type: horizontal-stack
        cards:
          - type: 'custom:mini-graph-card'
            align_header: left
            align_icon: left
            entities:
              - entity: sensor.wandthermostat_humidity_2
                index: 0
            color_thresholds:
              - value: 59
                color: '#EE0505'
              - value: 58
                color: '#FBA309'
              - value: 57
                color: '#03F630'
            hours_to_show: 24
            points_per_hour: 1
            animate: true
            hour24: true
            extrema: true
            name: Luftfeuchtigkeit Schlafzimmer
            show:
              points: true
              fill: fade
              labels: true
      - entity: climate.wohnzimmer
        type: thermostat
      - type: horizontal-stack
        cards:
          - type: 'custom:mini-graph-card'
            align_header: left
            align_icon: left
            entities:
              - entity: sensor.wandthermostat_humidity_3
                index: 0
            color_thresholds:
              - value: 59
                color: '#EE0505'
              - value: 58
                color: '#FBA309'
              - value: 57
                color: '#03F630'
            hours_to_show: 24
            points_per_hour: 1
            animate: true
            hour24: true
            extrema: true
            name: Luftfeuchtigkeit Wohnzimmer
            show:
              points: true
              fill: fade
              labels: true
      - type: horizontal-stack
        cards:
          - entity: climate.kinderzimmer
            type: thermostat
      - type: horizontal-stack
        cards:
          - entity: climate.kuche
            type: thermostat

You horizontal stacks only have one card in them.

You want to include multiple entities in the horizontal stack. See the docs.

Hi Chris,
thank you for the fast response.
I had tried this at the very beginning. However, the view is totally compressed here. I had also tried Panel Mode before, but then not all thermostats are shown, only the first row.

Maybe I’m doing something wrong in the config?

type: horizontal-stack
cards:
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    entities:
      - entity: sensor.wandthermostat_humidity_2
        index: 0
    color_thresholds:
      - value: 59
        color: '#EE0505'
      - value: 58
        color: '#FBA309'
      - value: 57
        color: '#03F630'
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    extrema: true
    name: Luftfeuchtigkeit Schlafzimmer
    show:
      points: true
      fill: fade
      labels: true
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    entities:
      - entity: sensor.wandthermostat_humidity
        index: 0
    color_thresholds:
      - value: 59
        color: '#EE0505'
      - value: 58
        color: '#FBA309'
      - value: 57
        color: '#03F630'
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    extrema: true
    name: Luftfeuchtigkeit Kinderzimmer
    show:
      points: true
      fill: fade
      labels: true
  - type: 'custom:mini-graph-card'
    align_header: left
    align_icon: left
    entities:
      - entity: sensor.wandthermostat_humidity_3
        index: 0
    color_thresholds:
      - value: 59
        color: '#EE0505'
      - value: 58
        color: '#FBA309'
      - value: 57
        color: '#03F630'
    hours_to_show: 24
    points_per_hour: 1
    animate: true
    hour24: true
    extrema: true
    name: Luftfeuchtigkeit Wohnzimmer
    show:
      points: true
      fill: fade
      labels: true

You can nest vertical and horizontals stack inside each other many times, no issue. For problem with only on card being displayed in panel mode - this is how it works… solution is to add yet another top level vertical or horizontal stack card and embed all other inside.

This is what I have that meets your demand:

          - type: vertical-stack
            cards:      

              - type: horizontal-stack
                cards:   

and then a new horizontal stack for every three entities

1 Like

remarkably, it’s exactly how it’s used in the second example here.

1 Like

That is not remarkable : I am searching for answers too :slight_smile:

1 Like

I just wanted to underline that it’s in docs and the OP had a chance to read them as someone else referred them to the very same page… well, almost the same :wink:

1 Like

The use of a panel might be handy here. Add a vertical stack with nested horizontal stacks for each row. The first row with the graphs, the second with the thermostat cards, and a third for the lonely thermostat card.

Do you have a graph for the last card? It’s tripping my OCD… :crazy_face:

Hi Chris, hi everyone.
Many thanks for your help.
The secret for me was in the vertical stack :slight_smile:
I have now been able to do everything with the vertical stack as I wanted it to be. I had just thought it was too complex.
Sometimes less is more :slight_smile:

I have now created 3 individual vertical stacks.

1 Like

I think it would be great to post your working code here so for the future reference.

Hi there,

here is my code for the 3 vertical stack.

 - badges: []
    cards:
      - cards:
          - align_header: left
            align_icon: left
            animate: true
            cards: null
            color_thresholds:
              - color: '#EE0505'
                value: 59
              - color: '#FBA309'
                value: 58
              - color: '#03F630'
                value: 57
            entities:
              - entity: sensor.wandthermostat_humidity
                index: 0
            extrema: true
            hour24: true
            hours_to_show: 24
            name: Luftfeuchtigkeit Kinderzimmer
            points_per_hour: 1
            show:
              fill: fade
              labels: true
              points: true
            type: 'custom:mini-graph-card'
          - entity: climate.kinderzimmer
            type: thermostat
        type: vertical-stack
      - cards:
          - align_header: left
            align_icon: left
            animate: true
            cards: null
            color_thresholds:
              - color: '#EE0505'
                value: 59
              - color: '#FBA309'
                value: 58
              - color: '#03F630'
                value: 57
            entities:
              - entity: sensor.wandthermostat_humidity_2
                index: 0
            extrema: true
            hour24: true
            hours_to_show: 24
            name: Luftfeuchtigkeit Schlafzimmer
            points_per_hour: 1
            show:
              fill: fade
              labels: true
              points: true
            type: 'custom:mini-graph-card'
          - cards: null
            entity: climate.schlafzimmer
            type: thermostat
          - entity: climate.kuche
            type: thermostat
        type: vertical-stack
      - cards:
          - align_header: left
            align_icon: left
            animate: true
            cards: null
            color_thresholds:
              - color: '#EE0505'
                value: 59
              - color: '#FBA309'
                value: 58
              - color: '#03F630'
                value: 57
            entities:
              - entity: sensor.wandthermostat_humidity_3
                index: 0
            extrema: true
            hour24: true
            hours_to_show: 24
            name: Luftfeuchtigkeit Wohnzimmer
            points_per_hour: 1
            show:
              fill: fade
              labels: true
              points: true
            type: 'custom:mini-graph-card'
          - entity: climate.wohnzimmer
            type: thermostat
        type: vertical-stack
    panel: false
    path: test-4
    title: Raumklima