Confusing myself over grid and gaps

Simple dashboard but can’t seem to figure out how to clean up the card heights. Would like col1 and col2 to include “short” cards while col3 has a taller card. In my current layout the first and second columns are “forced” to the height of the third column card. I’ve tried a lot of examples in both the dashboard YAML and individual cards (things like row-height, stretch, grid-template-rows, etc.) and can’t seem to get the first two columns to be shorter.


theme: mushroom
icon: mdi:home-circle
path: default_view
type: custom:grid-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"

Thermostat card

type: custom:tabbed-card
options: {}
  grid-area: col1
  place-self: auto
  - card:
      type: thermostat
      entity: climate.ecobee
      label: thermostat
  - card:
      type: entities
        - entity: sensor.ecobee_air_quality_index
        - entity: sensor.ecobee_co2
        - entity: sensor.ecobee_voc
        - entity: sensor.ecobee_humidity
        - entity: sensor.smartsensor_temperature
      label: Environment


initial_view: dayGridMonth
type: calendar
  - calendar.cal1
  - calendar.cal2
  - calendar.cal3
  - calendar.cal4
  - calendar.cal5
  - calendar.cal6
  grid-area: col3

End state:

I know some stock cards (like media-player) will auto-adjust height but I can’t figure this one out and getting frustrated. Feel like I need to nest card types in each column but starting to lose momentum.

Any help?

As far as I can see it does as you asked it to.
Draw the grid of col1 to col9 with straight lines and then put the elements into those fields and you can then see it is as you asked.

Thanks for the suggestion but I tried filling in every element and still have the large gaps (e.g. between thermostat and shopping list). I feel like I went too deep into the YAML rabbit hole and am still too inexperienced to see what I’m doing wrong. Probably something with formatting being outside a card or some row syntax I’m missing. Will pick it up again this weekend but do appreciate the help. Cheers!

You have to think “out of the box” here. :wink:

1 Like

Was thinking grid was the way to go since I get the flexibility of CSS layout… Maybe I should take baby-steps. Switching to vertical layout-card with specific columns gave me the layout I want (for now) for this dashboard.

What box should I think myself out of next? :grinning:

The layout you have with vertical cards are more flexible, so it can be viewed optimally on multiple types of units.
Grids will make it hard to see on single columns units, like mobile phones.

If you want to play with grids anyway, then smallest card should set the row height and the other cards then have to span multiple rows.

1 Like