Custom grid layout not working as expected when using a lot of columns

My Home Assistant version: 2024.2.5 (CORE) 2024.02.1 (SUPERVISOR) 20240207.1 (FRONTEND)

Layout-card version (FROM BROWSER CONSOLE):

What I am doing: I am trying to get the perfect card layout for my tablet, so that i don't have to scroll, and so that everything looks nice. Currently I have 4 rows and 4 columns, but would like to change this to 4 rows and 8 columns, so I can have more granular control over the column widths.

However when i try to add more columns, for some reason my climate grid area goes to the wrong place.

CSS that goes wrong (8 columns, 4 rows): Configuration: mediaquery: "(max-width: 999px)": grid-template-columns: 100% grid-template-areas: | "he" "cl" "tgl_ph" "lbr" "ls_bed" "ls_win" "lbh" "st" "bat" "in" "tgl" "au" "(min-width: 1000px)": align-content: start justify-content: start align-items: start justify-items: start grid-template-columns: repeat(8, 12.5%) grid-template-rows: 70px 30vh 38vh 7vh grid-template-areas: > "he he he he he he he he" "in in lbr lbr lbh lbh tgl tgl" "cl cl ls_bed ls_bed ls_win ls_win au au" "bat bat bat bat bat st st st" "tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph" Card that goes wrong: `type: vertical-stack cards:

type: custom:mushroom-title-card title: Climate
type: vertical-stack cards:
- type: custom:mushroom-climate-card entity: climate.airco_henri show_temperature_control: true fill_container: true hvac_modes:
  - fan_only
  - cool collapsible_controls: false icon: mdi:air-conditioner name: Airco layout: horizontal primary_info: name
- square: false type: grid cards:
  - type: custom:mushroom-entity-card entity: sensor.average_temperature_kamer_henri name: Temp - Room icon_type: none
  - type: custom:mushroom-entity-card entity: sensor.average_temperature_gang_zolder name: Temp - Hall icon_type: none
  - type: custom:mushroom-entity-card name: Humidity - Room entity: sensor.average_humidity_kamer_henri icon_type: none
  - type: custom:mushroom-entity-card name: Humidity - Hall entity: sensor.average_humidity_gang_zolder icon_type: none columns: 2 view_layout: grid_area: cl `

Current setup (4 columns, 4 rows) for my 1280x800 screen: Home view configuration: mediaquery: "(max-width: 999px)": grid-template-columns: 100% grid-template-areas: | "header" "climate" "toggles_phone" "lightbulbsroom" "ledstripbed" "ledstripwindow" "lightbulbshallway" "states" "battery" "info" "toggles" "automations" "(min-width: 1000px)": align-content: start justify-content: start align-items: start justify-items: start grid-template-columns: 25% 25% 25% 25% grid-template-rows: 70px 30vh 38vh 7vh grid-template-areas: | "header header header header" "info lightbulbsroom lightbulbshallway toggles" "climate ledstripbed ledstripwindow automations" "battery battery battery states" "toggles_phone toggles_phone toggles_phone toggles_phone" Screenshot:

What I expected to happen: Card goes to its designated grid area, like in this CSS & HTML compiler:

What happened instead:

Climate grid area fills in the wrong area (see what i am doing for more info)

Minimal steps to reproduce:

Dash layout where it still goes right: ` - theme: Backend-selected title: Home2 type: custom:grid-layout layout: mediaquery: '(max-width: 999px)': grid-template-columns: 100% grid-template-areas: | "he" "cl" "tgl_ph" "lbr" "ls_bed" "ls_win" "lbh" "st" "bat" "in" "tgl" "au" '(min-width: 1000px)': align-content: start justify-content: start align-items: start justify-items: start grid-template-columns: 25% 25% 25% 25% grid-template-rows: 70px 30vh 38vh 7vh grid-template-areas: | "he he he he" "in lbr lbh tgl" "cl ls_bed ls_win au" "bat bat bat st" "tgl_ph tgl_ph tgl_ph tgl_ph" icon: '' badges: [] cards:

type: custom:mushroom-title-card title: Hello, {{ user }}! subtitle: Home, Swipe to navigate alignment: center view_layout: grid-area: he place-self: center center
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Info view_layout: grid_area: in
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Lightbulbs - Room view_layout: grid-area: lbr
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Lightbulbs - Hallway view_layout: grid-area: lbh
type: vertical-stack cards:
- type: custom:mushroom-title-card title: tgl view_layout: grid-area: tgl show: mediaquery: '(min-width: 1000px)'
type: vertical-stack view_layout: grid_area: cl cards:
- type: custom:mushroom-title-card title: Climate
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Ledstrip - Bed side view_layout: grid-area: ls_bed
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Ledstrip - Window side view_layout: grid-area: ls_win
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Automation control view_layout: grid-area: au show: mediaquery: '(min-width: 1000px)'
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Batteries view_layout: grid-area: bat
type: vertical-stack cards:
- type: custom:mushroom-title-card title: States alignment: end
- type: custom:mushroom-chips-card chips:
  - type: action icon: mdi:led-strip tap_action: action: call-service service: scene.turn_on target: entity_id: scene.bed_red_led data: {}
  - type: entity entity: binary_sensor.room_presence use_entity_picture: false
  - type: entity entity: redacted icon: mdi:bed-outline
  - type: action icon: mdi:menu-open tap_action: action: call-service service: fully_kiosk.load_url target: device_id: redacted data: url: ' redacted' hold_action: action: url url_path: 'redacted' double_tap_action: action: url url_path: 'redacted'
  - type: entity entity: redacted icon: mdi:timer-alert-outline name: Screen off timer
  - type: action tap_action: action: call-service service: number.set_value target: entity_id: redacted data: value: '0' hold_action: action: call-service service: number.set_value target: entity_id: redacted data: value: '1' icon: mdi:monitor-screenshot alignment: end view_layout: grid-area: st
type: vertical-stack cards:
- type: custom:mushroom-title-card title: Controls alignment: center view_layout: grid-area: tgl_ph show: mediaquery: '(max-width: 999px)'`

dash layout where it goes wrong: `views:

theme: Backend-selected title: Home type: custom:grid-layout layout: mediaquery: '(max-width: 999px)': grid-template-columns: 100% grid-template-areas: | "he" "cl" "tgl_ph" "lbr" "ls_bed" "ls_win" "lbh" "st" "bat" "in" "tgl" "au" '(min-width: 1000px)': align-content: start justify-content: start align-items: start justify-items: start grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% grid-template-rows: 70px 30vh 38vh 7vh grid-template-areas: > "he he he he he he he he" "in in lbr lbr lbh lbh tgl tgl" "cl cl ls_bed ls_bed ls_win ls_win au au" "bat bat bat bat bat st st st" "tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph tgl_ph" icon: '' badges: [] cards:
- type: custom:mushroom-title-card title: Hello, {{ user }}! subtitle: Home, Swipe to navigate alignment: center view_layout: grid-area: he place-self: center center
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Info view_layout: grid_area: in
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Lightbulbs - Room view_layout: grid-area: lbr
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Lightbulbs - Hallway view_layout: grid-area: lbh
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: tgl view_layout: grid-area: tgl show: mediaquery: '(min-width: 1000px)'
- type: vertical-stack view_layout: grid_area: cl cards:
  - type: custom:mushroom-title-card title: Climate
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Ledstrip - Bed side view_layout: grid-area: ls_bed
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Ledstrip - Window side view_layout: grid-area: ls_win
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Automation control view_layout: grid-area: au show: mediaquery: '(min-width: 1000px)'
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Batteries
  - type: custom:mushroom-chips-card chips:
    - redacted view_layout: grid-area: bat
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: States alignment: end
  - type: custom:mushroom-chips-card chips:
    - redacted
    - type: entity entity: redacted icon: mdi:timer-alert-outline name: Screen off timer
    - type: action tap_action: action: call-service service: number.set_value target: entity_id: redacted data: value: '0' hold_action: action: call-service service: number.set_value target: entity_id: redacted data: value: '1' icon: mdi:monitor-screenshot alignment: end view_layout: grid-area: st
- type: vertical-stack cards:
  - type: custom:mushroom-title-card title: Controls alignment: center view_layout: grid-area: tgl_ph show: mediaquery: '(max-width: 999px)' `



Error messages from the browser console:

Loading module from “redacted/config/www/community/lovelace-card-mod/card-mod.js” was blocked because of a disallowed MIME type (“text/html”).
[0](redacted/dashboard-development/0?kiosk=&auth_callback=1&code=redacted)
Uncaught (in promise) TypeError: error loading dynamically imported module: redacted/config/www/community/lovelace-card-mod/card-mod.js
Loading module from “redacted/browser_mod.js?automatically-added” was blocked because of a disallowed MIME type (“text/plain”).
[0](redactedredacted/dashboard-development/0?kiosk=)
LAYOUT-CARD 2.4.4 IS INSTALLED [layout-card.js:228:115](redacted/hacsfiles/lovelace-layout-card/layout-card.js?hacstag=156434866244)
AUTO-ENTITIES 1.12.1 IS INSTALLED [auto-entities.js:172:7850](redacted/hacsfiles/lovelace-auto-entities/auto-entities.js?hacstag=1677445841121)
Uncaught (in promise) redacted/browser_mod.js?automatically-added [load_resource.ts:13:35](https://raw.githubusercontent.com/home-assistant/frontend/20240207.1/src/common/dom/load_resource.ts)
Unknown property ‘-moz-flex-basis’.  Declaration dropped. [0:14:31](redacted/dashboard-development/0?kiosk=)
Unknown property ‘-moz-osx-font-smoothing’.  Declaration dropped. [0:1:75](redacted/dashboard-development/0?kiosk=&auth_callback=1&code=e02dee2188784e94929407d119c2c222&state=eyJoYXNzVXJsIjoiaHR0cDovLzE5Mi4xNjguMTc4LjExNDo4MTIzIiwiY2xpZW50SWQiOiJodHRwOi8vMTkyLjE2OC4xNzguMTE0OjgxMjMvIn0%3D&storeToken=true)
---

**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.

thomasloven / lovelace-layout-card

Custom grid layout not working as expected when using a lot of columns #279