I'm going mad here - thomasloven lovelace-layout-card

Hi!

I fairly new with HA, but loving all the integrations and automations you can do - cool!
I have now moved on to the frontend - getting my dashboards to look the best.
Have bought a 24" touchscreen i’m using for the dashboard.

I order to place stuff the right place, I’m struggling quite a bit with lovelace!
(I come from the “old” HTML table background, without all the fancy CSS you have nowdays :rofl:)

So, I have started using Thomas Lovens very nice Lovelace Custom Grid (and learning CSS grid- stuff)
BUT! I simple cannot get this working, and I have absolutely no idea why - think I have tried everything in the template sections.
What I want is this layout:

But what i get - in various different aspects, is this:

I have tried every combinations of grid column definitions, but I always end up with something that looks like a 50/50’ish first row - why!?

I’m dying to find out why it isn’t doing what I tell it to do.
As I wrote, I have tried numerus variations of grid-template-columns:
80% 20%
100% 300px
4fr 1fr
20% 20% 20% 20% 20% (and then with adjusted grid-template-areas)

What am I doing wrong here?
@thomasloven - don’t know if you are seeing anything here, but any guidance would be sooo welcome :pray:

This is my (lengthy) yaml:

  - type: custom:grid-layout
    title: grid
    path: grid
    layout:
      grid-template-columns: 4fr 1fr;
      grid-template-rows: auto;
      grid-template-areas: |
        "calendar calliste"
        "col1 col1"
    badges: []
    cards:
      - type: calendar
        entities:
          - calendar.familie
          - calendar.holidays_in_denmark
        initial_view: dayGridMonth
        view_layout:
          grid-area: calendar
      - type: vertical-stack
        view_layout:
          grid-area: calliste
        cards:
          - type: markdown
            content: '##  Quick Actions'
            card_mod:
              style: |
                ha-card {
                  --ha-card-background: #ED9C2C;
                  color: black;
                }
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: button
                    entity: light.stueetagenzone
                    tap_action:
                      action: call-service
                      service: script.godnatsluk
                    name: Godnat
                    icon: mdi:power-sleep
                    icon_height: 30px
                  - type: button
                    entity: light.stueetagenzone
                    tap_action:
                      action: call-service
                      service: script.Godmorgen
                    name: Godmorgen
                    icon: mdi:weather-sunset-up
                    icon_height: 30px
                  - type: button
                    entity: light.stueetagenzone
                    tap_action:
                      action: call-service
                      service: script.Farvel
                    name: Farvel
                    icon: mdi:door-closed-lock
                    icon_height: 30px
                  - type: button
                    entity: light.stueetagenzone
                    tap_action:
                      action: call-service
                      service: script.SeTV
                    name: Se TV
                    icon: mdi:remote-tv
                    icon_height: 30px
              - type: horizontal-stack
                cards:
                  - type: button
                    entity: light.emilieroom
                    tap_action:
                      action: call-service
                      service: script.EmilieMad
                    name: Emilie Mad
                    icon: mdi:food-fork-drink
                    icon_height: 30px
                  - type: button
                    entity: light.emilieroom
                    tap_action:
                      action: call-service
                      service: script.EmilieGodnat
                    name: Godnat Emilie
                    icon: mdi:sleep
                    icon_height: 30px
                  - type: button
                    entity: light.stueetagenzone
                    tap_action:
                      action: call-service
                      service: script.Hygge
                    name: Hygge
                    icon: mdi:record-player
                    icon_height: 30px
                  - type: button
                    entity: light.stueetagenzone
                    tap_action:
                      action: call-service
                      service: script.PlayGames
                    name: Spille spil
                    icon: mdi:gamepad-variant
                    icon_height: 30px
              - type: horizontal-stack
                cards:
                  - type: button
                    entity: light.stueetagenzone
                    tap_action:
                      action: call-service
                      service: script.LysFest
                    name: Fest
                    icon: mdi:party-popper
                    icon_height: 30px
                  - type: button
                    entity: light.blueroom
                    tap_action:
                      action: call-service
                      service: script.NILL
                    name: '-empty-'
                    icon: mdi:progress-question
                    icon_height: 30px
                  - type: button
                    entity: light.blueroom
                    tap_action:
                      action: call-service
                      service: script.NILL
                    name: '-empty-'
                    icon: mdi:progress-question
                    icon_height: 30px
                  - type: button
                    entity: light.blueroom
                    tap_action:
                      action: call-service
                      service: script.NILL
                    name: '-empty-'
                    icon: mdi:progress-question
                    icon_height: 30px
      - type: horizontal-stack
        view_layout:
          grid-area: col1
        cards:
          - type: custom:atomic-calendar-revive
            name: Schedule
            enableModeChange: false
            showLastCalendarWeek: true
            calShowDescription: true
            firstDayOfWeek: 1
            defaultMode: Event
            showDate: true
            sortByStartTime: true
            showWeekDay: true
            showMonth: true
            entities:
              - entity: calendar.familie
            showLocation: true
            language: da
            showCurrentEventLine: false
            showEventIcon: true
            showHiddenText: false
            disableCalLocationLink: false
            disableCalLink: true
            maxDaysToShow: 20
            showProgressBar: false
            hoursFormat: HH:mm
          - type: vertical-stack
            cards:
              - type: markdown
                content: '##  Seneste nyt'
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: #4A5A63;
                      color: white;
                    }
              - type: custom:list-card
                entity: sensor.engineering_feed
                row_limit: 6
                card_mod:
                  style: |
                    ha-card {
                      tr: grey;
                      color: black;
                    }
                title: null
                feed_attribute: entries
                columns:
                  - title: ''
                    field: title
                    add_link: link
              - type: markdown
                content: '##  Temperaturer'
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: #1AAD50;
                      color: #303030;
                    }
              - type: vertical-stack
                cards:
                  - type: horizontal-stack
                    cards:
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_outdoor_motion_sensor_1_temperature
                        name: Udendørs
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_motion_sensor_2_temperature
                        name: Gang oppe
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_motion_sensor_1_temperature_2
                        name: Gang nede
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_motion_sensor_1_temperature_2
                        name: NILL
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
                  - type: horizontal-stack
                    cards:
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_motion_sensor_1_temperature_3
                        name: Dressingroom
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_motion_sensor_1_temperature_4
                        name: Bad oppe
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_motion_sensor_1_temperature_5
                        name: Bad nede
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
                      - type: custom:mini-graph-card
                        entities:
                          - sensor.hue_motion_sensor_1_temperature_2
                        name: NILL
                        hours_to_show: 12
                        align_state: center
                        font_size: 70
                        font_size_header: 12
                        show:
                          icon: false
          - type: vertical-stack
            cards:
              - type: markdown
                content: '## Køkken'
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: grey;
                      color: black;
                    }
              - type: horizontal-stack
                cards:
                  - type: vertical-stack
                    cards:
                      - type: button
                        entity: light.kitchenroom
                        name: Køkken ON/OFF
                        icon: mdi:countertop
                        icon_height: 38px
                      - type: entities
                        entities:
                          - type: custom:slider-entity-row
                            entity: light.kitchenroom
                            hide_state: true
                            full_row: true
                  - type: vertical-stack
                    cards:
                      - type: horizontal-stack
                        cards:
                          - type: button
                            entity: light.kitchenroom
                            icon_height: 42px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: KitchenRoom
                                scene_name: Kitchen1
                            name: Dagslys
                            icon: mdi:white-balance-sunny
                          - type: button
                            entity: light.kitchenroom
                            icon_height: 42px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: KitchenRoom
                                scene_name: Kitchen2
                            name: Normalt
                            icon: mdi:ceiling-light
                      - type: horizontal-stack
                        cards:
                          - type: button
                            entity: light.kitchenroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: KitchenRoom
                                scene_name: Kitchen3
                            name: Dæmpet
                            icon: mdi:weather-sunset
                          - type: button
                            entity: light.kitchenroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: KitchenRoom
                                scene_name: Kitchen4
                            name: Fest!
                            icon: mdi:party-popper
              - type: markdown
                content: '## Stue'
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: grey;
                      color: black;
                    }
              - type: horizontal-stack
                cards:
                  - type: vertical-stack
                    cards:
                      - type: button
                        entity: light.stueroom
                        name: Stue ON/OFF
                        icon: mdi:sofa
                        icon_height: 38px
                      - type: entities
                        entities:
                          - type: custom:slider-entity-row
                            entity: light.stueroom
                            hide_state: true
                            full_row: true
                  - type: vertical-stack
                    cards:
                      - type: horizontal-stack
                        cards:
                          - type: button
                            entity: light.stueroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: StueRoom
                                scene_name: Stue1
                            name: Scene 1
                            icon: mdi:keyboard-f1
                          - type: button
                            entity: light.stueroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: StueRoom
                                scene_name: Stue2
                            name: Scene 2
                            icon: mdi:keyboard-f2
                      - type: horizontal-stack
                        cards:
                          - type: button
                            entity: light.stueroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: StueRoom
                                scene_name: Stue3
                            name: Scene 3
                            icon: mdi:keyboard-f3
                          - type: button
                            entity: light.stueroom
                            icon_height: 42px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: StueRoom
                                scene_name: stuetv
                            name: TV Scene
                            icon: mdi:remote-tv
          - type: vertical-stack
            cards:
              - type: markdown
                content: '## Spisebord'
                card_mod:
                  style: |
                    ha-card {
                      --ha-card-background: grey;
                      color: black;
                    }
              - type: horizontal-stack
                cards:
                  - type: vertical-stack
                    cards:
                      - type: button
                        entity: light.spisestueroom
                        name: Spisebord ON/OFF
                        icon: mdi:table-furniture
                        icon_height: 38px
                      - type: entities
                        entities:
                          - type: custom:slider-entity-row
                            entity: light.spisestueroom
                            hide_state: true
                            full_row: true
                  - type: vertical-stack
                    cards:
                      - type: horizontal-stack
                        cards:
                          - type: button
                            entity: light.spisestueroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: SpisestueRoom
                                scene_name: Spise1
                            name: Mad
                            icon: mdi:food
                          - type: button
                            entity: light.spisestueroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: SpisestueRoom
                                scene_name: Spise2
                            name: Dagslys
                            icon: mdi:white-balance-iridescent
                      - type: horizontal-stack
                        cards:
                          - type: button
                            entity: light.spisestueroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: SpisestueRoom
                                scene_name: Spise3
                            name: Hygge
                            icon: mdi:record-player
                          - type: button
                            entity: light.spisestueroom
                            icon_height: 41px
                            tap_action:
                              action: call-service
                              service: hue.hue_activate_scene
                              service_data:
                                group_name: SpisestueRoom
                                scene_name: Spise4
                            name: Farverig
                            icon: mdi:party-popper

Try this:

type: custom:grid-layout
layout:
  grid-template-columns: 25% 25% 25% 25%
  grid-template-rows: auto
  grid-template-areas: |
    "calendar calendar calendar calliste"
    "main1 main2 main3 main4"
cards:
....