Modify the Width of cards in Lovelace

Configuration Frontend
1

Hello everyone,

im looking for a solution for a “simple” problem:

I have a horizontal stack with 2 cards: Weather information and a vertical stack (with 2 cards)

I want the weather card to have 75% of the space and the vertical stack (with its 2 cards) should use the remaining 25%. I have read and testet something with “card-mod” but I’m not able the configure that.
Here is my code at the moment:

type: horizontal-stack
cards:

  • show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
  • type: vertical-stack
    cards:
    • type: custom:mini-graph-card
      name: Wohn
      decimals: 1
      font_size_header: 12
      height: 18
      entities:
      • entity: sensor.ht_wohnzimmer_temperature
        name: Temperatur
        color: orange
        state_adaptive_color: true
        show_graph: true
      • entity: sensor.ht_wohnzimmer_humidity
        name: Feuchtigkeit
        show_state: true
        color: lightblue
        state_adaptive_color: true
        show_legend: true
        show_graph: true
        line_color: blue
        line_width: 7
        font_size: 60
    • type: custom:mini-graph-card
      name: Technik
      decimals: 1
      font_size_header: 12
      height: 18
      entities:
      • entity: sensor.shelly_h_t_temperature
        name: Temperatur
        color: orange
        state_adaptive_color: true
        show_graph: true
      • entity: sensor.shelly_h_t_humidity
        name: Feuchtigkeit
        show_state: true
        color: lightblue
        state_adaptive_color: true
        show_legend: true
        show_graph: true
        line_color: blue
        line_width: 7
        font_size: 60

And this is how it looks like:

Screenshot 2023-04-22 101737

As you can the both cards uses 50% - but i want to have 75% for the left card and 25% for the right card(s).

Can someone help me?

2

Have you seen the layout card, this would do it.

Add it as a card (not a view layout) and use the grid layout option. Takes a bit of tinkering but I use it for similar cases and works well.

3

Quick example:

image
image965×485 19.6 KB 

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 30% 1fr
  grid-template-areas: |
    "left right"
cards:
  - type: markdown
    content: I am Left
    view_layout:
      grid-area: left
  - type: markdown
    content: I am Right
    view_layout:
      grid-area: right
5 Likes
4

Thank you for your input. Looks like I’m not far away from a solution but the margin of this generated card(s) are not correct - I’ve tried to set margins to 0px, this makes it a bit better but as you can see on the picture its not the same as the other cards. also the first Card is to big with 70%…

Here is my code

type: custom:layout-card
layout_type: custom:grid-layout
cards:

  • show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.forecast_home
    name: Wetter
    view_layout:
    grid-area: left
  • type: vertical-stack
    view_layout:
    grid-area: right
    cards:
    • type: custom:mini-graph-card
      name: Wohn
      decimals: 1
      font_size_header: 12
      height: 18
      entities:
      • entity: sensor.ht_wohnzimmer_temperature
        name: Temperatur
        color: orange
        state_adaptive_color: true
        show_graph: true
      • entity: sensor.ht_wohnzimmer_humidity
        name: Feuchtigkeit
        show_state: true
        color: lightblue
        state_adaptive_color: true
        show_legend: true
        show_graph: true
        line_color: blue
        line_width: 7
        font_size: 60
    • type: custom:mini-graph-card
      name: Technik
      decimals: 1
      font_size_header: 12
      height: 18
      entities:
      • entity: sensor.shelly_h_t_temperature
        name: Temperatur
        color: orange
        state_adaptive_color: true
        show_graph: true
      • entity: sensor.shelly_h_t_humidity
        name: Feuchtigkeit
        show_state: true
        color: lightblue
        state_adaptive_color: true
        show_legend: true
        show_graph: true
        line_color: blue
        line_width: 7
        font_size: 60
        layout:
        margin: 0px 0px 0px 0px
        grid-template-columns: 70% 30%
        grid-template-areas: |
        “left right”

thats what it looks like
neu

2 Likes
5

When posting your code its easier for everyone if its formatted, look for the </> icon in the tool bar when adding it to format it nicely.

The layout card adds a margin of 4px (see this thread Additional margins when nesting Grid Layout-Cards within Grid View Layouts · Issue #137 · thomasloven/lovelace-layout-card · GitHub), the easiest solution seems to be to set it to a negative value to remove it margin: '-4px'

I assume the card beneath is a grid with three columns, in that case its fair to assume each column is 33% wide, if you want your first “wide” column to cover the two in the grid then 66% rather than 70% would be better (I found actually 64% aligned better) - trial and error, adjust and see what you get…

type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: 67% 33%
  margin: '-4px'
  grid-template-areas: |
    “left right”
...rest of the card config.....

gave me the following result:

image

3 Likes