Span over columns and rows in grid card

Feature Requests
21

Well, I’ll try, but need to figure out how to make it… My full dashboard code is +35k characters, while forum allors for 32k characters post only… Perhaps I’ll need to think of Git to share the code.
EDIT: ok, so I created a new gists with necessary files:

dashboard.yaml contains full code for this dashboard and themes.yaml theme I used (I frequently refer in my config to custom color palette thefined in this file).
Some watchouts:

  • dashboard contains 2 variants based on mediaquery result; one for PC screen and one for mobile. Both varies by layout of grid.
  • there are some conditional cards for router bandwith monitoring. If main link is up then WAN and VPN cards are displayed. If link goes down and router switches to LTE backup, then corresponding LTE card is displayted instead.
  • obviously there is plenty custom sensors specific to my home network HW…
2 Likes
22

This is awesome! Thanks so much! It’s some great inspiration and gives me some ideas for things related to custom theming as well.

23

I have been trying to exactly this and it’s actually much simpler because Thomas Loven states in the docs:

The grid layout accepts any option starting with grid- that works for a Grid Container as well as grid , place-items and place-content . The layout options margin , padding and height also apply as for column based layouts.

So you can use any standard CSS grid- stuff

So this in the view layout:

grid-template-columns: 33% 33% 33%
grid-template-areas: |
  "h1 h2 h3"
  "c1 c2 c3"
  "c4 c5 c6"
  "f1 f2 f3"

and this in for example a horizonal stack (told to span multiple columns but placed in c1

type: horizontal-stack
cards:
  - type: custom:mushroom-light-card
    entity: light.kitchen_lights
    show_brightness_control: true
    collapsible_controls: true
  - type: custom:mushroom-light-card
    entity: light.kitchen_entrance_downlights
    show_brightness_control: true
    collapsible_controls: true
  - type: custom:mushroom-light-card
    entity: light.waterfall_lights
view_layout:
  grid-area: c1
  grid-column-start: 1;
  grid-column-end: span 3

gives you this:

span
span1206×175 18.5 KB