Hey everyone! I’m trying to set up a simple dashboard but I’m running into an issue with the card heights. I want the first two columns to have shorter cards while the third column has a taller card. However, no matter what I try, the first two columns are forced to match the height of the third column card. I’ve experimented with various settings in both the dashboard YAML and individual cards, like row-height, stretch, grid-template-rows, and more, but nothing seems to work. Here’s a snippet of my current layout:
yaml
theme: mushroom
icon: mdi:home-circle
path: default_view
type: custom:grid-layout
layout:
grid-template-rows: auto auto auto
grid-template-columns: 30% 30% 40%
grid-template-areas:
| “col1 col2 col3”
| “col4 col5 col6”
| “col7 col8 col9”
And here’s an example of one of the cards:
yaml
type: custom:tabbed-card
options: {}
view_layout:
grid-area: col1
place-self: auto
tabs:
- card:
type: thermostat
entity: climate.ecobee
attributes:
label: thermostat - card:
type: entities
entities:
- entity: sensor.ecobee_air_quality_index
- entity: sensor.ecobee_co2
- entity: sensor.ecobee_voc
- entity: sensor.ecobee_humidity
- entity: sensor.smartsensor_temperature
attributes:
label: Environment
I know some stock cards auto-adjust their height, but I can’t figure out how to make this work for my setup. Any tips or suggestions would be greatly appreciated! I’m starting to lose momentum, so any help would be amazing. Thanks in advance!