Confusing myself over grid and gaps

Configuration Frontend
1

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.

gap
gap2822×1504 185 KB

Dashboard

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"

Thermostat card

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

Calendar

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

End state:

gaps3
gaps31362×936 52.8 KB

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?

2

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.

3

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!

4

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

1 Like
5

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.

gap4
gap42850×1488 198 KB

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

6

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