How to make a card wider using 'layout-card'?

OK, so here is sample code you can use (dashboard in Panel mode, as @dextar described in post above):

type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
  grid-template-columns: 10% 80% 10%
  grid-template-rows: auto
  grid-template-areas: |
    "left middle right"
cards:
  - type: custom:gap-card
    view_layout:
      grid:area: left
    # here your actual card(s) goes
  - type: entities
    entities:
      - entity: light.attic_stairwais_light
      - entity: light.basement
    view_layout:
      grid:area: middle
  - type: custom:gap-card
    view_layout:
      grid:area: righ

Resylt loos like that:

5 Likes