Grid-layout - behavior of vertical cards

[cedricdelecole]

My Home Assistant version: 2024.1.2

Layout-card version (FROM BROWSER CONSOLE): latest

What I am doing:

Configured 3 columns and placed cards in columns 1 and 3. The 2 cards in columns 1 are ok .... but the card in column 3 is then taking the place of 2 cards, so it vertically takes the place of 2 cards.

What I expected to happen: the card on the third column should take 1 card place.

What happened instead: the card on the 3rd column is taking the place of 2 cards :

Minimal steps to reproduce:

# The least ammount of code possible to reproduce my error

• type: custom:grid-layout title: Grid layout path: grid-layout layout: grid-template-column: 33% auto 33% grid-template-rows: auto grid-template-areas: | "header header header" ". messages ." "left middle right" ". footer ." badges: [] cards:
  • type: custom:mushroom-chips-card chips:
    • type: entity entity: person.delecole
    • type: light icon: mdi:alarm-panel use_light_color: false
    • type: back icon: mdi:car-back view_layout: grid-area: header
  • type: markdown content: hello Cedric view_layout: grid-area: messages
  • type: thermostat entity: climate.chbre_alessio view_layout: grid-area: right
  • type: vertical-stack cards:
    • type: thermostat entity: climate.couloir name: Couloir - left
    • type: thermostat entity: climate.chbre_flavia name: Flavia - left show_current_as_primary: false view_layout: grid-area: left
  • type: markdown content: Footer de Cédric view_layout: grid-area: footer

# End of code

Error messages from the browser console:

---

By putting an X in the boxes ([X]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [x] Have made sure I am using the latest version of the plugin.
• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[Nick2253]

It's hard to tell exactly because your code isn't formatted, but I'm guessing that the problem is your vertical-stack card. As far as grid-layout is concerned, that is one card, and so it means that column 1 and column 3 only have "one" card in them.

If you're going to use grid-layout, it doesn't make sense to nest a vertical-stack card because you can accomplish all of that by just using the grid.

FYI, if you use three backticks ``` above and below your code, that will properly format it into a code block.

For example:

```
type: custom:grid-layout
title: Grid Layout
etc.
```