I am trying to allocate 2/3 of the width of a lovelace card to one card and 1/3 to the other. As you can see in the first picture when the browser window is wide enough, there is no issue and the cards are displayed correctly. When the windows is narrowed, the card enters the adjacent card.
Also, in the app, if you look closely, the gap that is present between the disk and the uptime card on desktop is not there.
Is there a way to fix these?
Here is my code for this portion:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: 'custom:mini-graph-card'
entities:
- sensor.processor_use
name: CPU
icon: 'mdi:chip'
animate: true
line_width: 10
smoothing: true
line_color: '#0277BD'
- type: 'custom:mini-graph-card'
entities:
- sensor.memory_use_percent
name: RAM
icon: 'mdi:memory'
animate: true
line_width: 10
smoothing: true
line_color: '#ff1744'
- type: 'custom:layout-card'
layout: grid
grid-template-columns: 33% 33% 34%
cards:
- type: 'custom:mini-graph-card'
gridcol: 1 / 3
entities:
- entity: sensor.disk_use_home
name: Disk
smoothing: true
- entity: sensor.disk_use_percent_home
show_state: true
show_graph: false
icon: 'mdi:sd'
line_width: 5
animate: true
hours_to_show: 100
- type: sensor
entity: sensor.uptime_parsed
gridcol: 3 / 3
