Achieving a Custom Grid Layout with Lovelace

Configuration Frontend
1

Hello,

I am so stuck in creating a layout which I thought was going to be easy peasy.

I’m am (have) created a dashboard view that by principle is built out of 3x3 cards.

image
image526×512 19.1 KB

Next step I wanted to combine the 2x2 cards in the upper left corner to make it look like like this:

image

I can’t get it done! Can someone please push me into the correct direction?

To avoid conflicts with the next step I have in mind, eventually I want to stack multiple 3x3 grids. Maybe some will also have the bigger 2x2 card. Something like this:

image
image256×736 2.4 KB

In the 2x2 card I eventually want to create a custom card with multiple (dynamic) content. Like weather, room temperature and humidity, etc.

I have pasted my current code below but I think it’s not much use as a base. I’m pretty sure I will have to use more advanced options like layout-card or custom-card.

I would really appreciate a push into the right direction.

views:
  - title: 3 x 3
    path: Nathan
    cards:
      - card_mod:
          style: |
            ha-card {
              color: red;
            }
        square: true
        type: grid
        cards:
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.living_room
            show_state: false
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.ikea_5
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.ikea_4
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.dining
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.ikea_2
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.ikeac_7
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.ikea_6
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.ikeac_8
          - show_name: true
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: light.ikea_1
        columns: 3
2

Isn’t this what sections does?

3

I don’t know but I will look into that :slight_smile:

4

Looking at it more closely, I do not see this as the solution to my issue.

5

custom layout-card?
You can use it as a regular card, building custom grid within it, or you can can use it cusom dashboard layout, putting cards wherever you want within entire dasboard.
Referring to example you gave in the very first post, you could do something like:

type: custom:layout-card
layout_type: grid
layout_options:
  grid-template-columns: 33% 33% 33%
  grid-template-rows: auto auto auto
  grid-template-areas: >
    "1 1 2" # this section defines areas to put cards into
    "1 1 3"
    "4 5 6"
cards:
  - type: button
    show_name: true
    show_icon: true
    tap_action:
      action: toggle
    entity: light.living_room
    show_state: false
    view_layout:
      grid-area: 1 # this defines where in the grid this particular card will be placed
  - type: button
    show_name: true
    show_icon: true
    tap_action:
      action: toggle
    entity: light.dinning
    show_state: false
    view_layout:
      grid-area: 2
. . . 
# and so on for every defined grid call
. . .
6

That works!

Thank you so much! Really, I am so grateful. I tried so many things and the results felt so far away from what I wanted. Your code did it! It feels a little frustrating too because I think I was at one point at the right track but failed in the end.

This is one of my codes I tried at one point:

views:
  - title: Custom Layout
    path: custom-layout
    panel: true
    cards:
      - type: custom:layout-card
        layout_type: grid
        layout_options:
          grid-template-columns: 33% 33% 33%
          grid-template-rows: auto auto auto
          grid-template-areas: 
            "weather weather small1"
            "weather weather small2"
            "small3 small4 small5"
        cards:
          - type: weather-forecast
            entity: weather.forecast_home_italy
            show_forecast: false
            view_layout:
              grid-area: weather
          - type: button
            entity: light.living_room
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            view_layout:
              grid-area: small1
          - type: button
            entity: light.dining
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            view_layout:
              grid-area: small2
          - type: button
            entity: light.corridor
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            view_layout:
              grid-area: small3
          - type: button
            entity: media_player.homepod_italy
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            view_layout:
              grid-area: small4
          - type: button
            entity: switch.automation_hds1
            show_name: true
            show_icon: true
            tap_action:
              action: toggle
            view_layout:
              grid-area: small5

I honestly don’t know anymore how I got to this code because it was after many attempts and trying snapshots and merges of other examples.

Thanks again!

7

Resurrecting this.

If i wanted something like this:

---------------------------
|           |             |
|           |             |
|           |             |
-------------             |
|           |             |
|           |             |
---------------------------

just 2 columns, 1 (right) 100% height, left column having content in the top row vertically aligned to the top and the bottom row vertically aligned to the bottom.

this is what i have now but its not working. Everything is in the first column.

- type: custom:layout-card
      layout_type: grid
      layout_options:
        grid-template-columns: 33% 67%
        grid-template-rows: auto auto
        grid-template-areas: >
          "1 2"
          "1 2"
          "3 2"
8

You have some misalignment of rows, it should look like:

- type: custom:layout-card
  layout_type: grid
  layout_options:
    grid-template-columns: 33% 67%
    grid-template-rows: auto auto
    grid-template-areas: >
      "1 2"
      "1 2"
      "3 2"

Then perhaps it is not needed to have “1 2” duplicated as this represents same cells in the grid. Finally symptom you gave looks to me like you forgot to add view_layout: option to actual cards aand then all of them are placed outside of grid, within available screen area.

1 Like