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

[henri006]

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.