Is this a do-able thing?

[fyton2v]

I’d like to configure my dashboard with an array of conditional cards that appear when certain lights are on. That’s definitely do-able … BUT there doesn’t seem to be a way of easily using lovelace to keep this orderly. The cards would just appear in a long list, whereas I’d like them to appear dynamically in a grid. If I use a grid card or any of the stack cards, the light cards won’t dynamically shift position to conserve dashboard real estate… at least I don’t think they will.

I’m trying to keep things consistent with my mushroom card theme, which is below. Ideally, there would be some way of having conditional mushroom cards pop up in that 3 column layout and have the cards be able to jump around so they’ll appear organized. I hope that makes sense.

[Stiltjack]

Should be doable. Here’s mine:

The buttons at the top are tile cards in a grid. The two on the right of the grid which say “Windows closed” and “Doors closed” are conditional cards - if a window is open the wording changes to say “Window open”. Note the singular “window”. It doesn’t take much to make me happy.

[Still_ill]

I’m not quite sure if I’ve understood you correctly, but if so, here is a way to display the cards dynamically and space-saving, depending on whether they are on or off. they always arrange themselves next to each other, as you can see in the two screenshots

All lights on, all mushroom cards visible:

Some lights off and some cards invisible, and the others organised next to each other:

square: false
type: grid
cards:
  - type: conditional
    conditions:
      - condition: state
        entity: light.hue_play_1
        state: 'on'
    card:
      type: custom:mushroom-light-card
      entity: light.hue_play_1
      layout: vertical
  - type: conditional
    conditions:
      - condition: state
        entity: light.hue_play_2
        state: 'on'
    card:
      type: custom:mushroom-light-card
      entity: light.hue_play_2
      layout: vertical
  - type: conditional
    conditions:
      - condition: state
        entity: light.ball
        state: 'on'
    card:
      type: custom:mushroom-light-card
      entity: light.ball
      layout: vertical
  - type: conditional
    conditions:
      - condition: state
        entity: light.spot
        state: 'on'
    card:
      type: custom:mushroom-light-card
      entity: light.spot
      layout: vertical
  - type: conditional
    conditions:
      - condition: state
        entity: light.strahler
        state: 'on'
    card:
      type: custom:mushroom-light-card
      entity: light.strahler
      layout: vertical
  - type: conditional
    conditions:
      - condition: state
        entity: light.decke_flur
        state: 'on'
    card:
      type: custom:mushroom-light-card
      entity: light.decke_flur
      layout: vertical

[fyton2v]

So I think you’re doing what I’d like to do. Let me see if I understand. So you’re just using a regular grid card and laying out the conditional cards in the grid. Which makes sense. But from your images, it looks like “Ball” and “Hue Play 2” switch positions. This is exactly what I’m trying to do, but I didn’t think the cards could move around in the grid. When the the lights are off, I’d like the cards to disappear. When they change state to ‘on’, I’d like them to appear in an organized grid vs all over a static grid with odd gaps. Do they fill in automatically by row and column?

I guess I could just try. Thanks by the way (both of you).

[Still_ill]

Happy to Help!

Exactly, a very simple grid-card. Ball and Hue Play 2 have swapped positions because Hue Play 2 is switched off in the second Screenshot and is therefore not visible. To avoid a gap in the grid, Ball then slides up. And yes, they automatically fill up column and row

You can also simply copy my yaml and replace the entity: with your entitys.

[d_sellers1 (Derek)]

Instead of using all the conditionals, consider the auto-entities card.

Automatically populate lovelace cards with entities matching certain criteria.

My example uses custom:button-cards but the concept would apply to using Mushroom cards.

YAML code

type: custom:auto-entities
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout_options:
    width: 100
  layout:
    grid-template-columns: auto auto auto
    grid-template-rows: auto
filter:
  include:
    - entity_id: light.*_lights
      options:
        type: custom:button-card
        entity_id: this.entity_id
        layout: vertical
        show_last_changed: true
        aspect_ratio: 1/1
        styles:
          card:
            - box-shadow: none
            - background-color: transparent
            - border: 1
            - padding: 15%
            - color: yellow
            - opacity: 1
            - font-size: 10px
            - text-shadow: 0px 0px 5px black
            - text-transform: capitalize
          icon:
            - width: 40%
            - padding-top: 10px
          label:
            - color: gray
            - font-size: 10px
            - padding-top: 0px
            - opacity: 0.7
          name:
            - white-space: normal
            - font-weight: 300
            - font-size: 10px
            - color: white
        tap_action:
          action: toggle
        hold_action:
          action: more-info
  exclude:
    - state: 'off'
    - entity_id: '*screen*'
    - entity_id: light.all_lights
    - state: '0'
    - state: unavailable
sort:
  method: name
  reverse: false
  numeric: false
show_empty: true

[LiQuid_cOOled]

@d_sellers1 method is the way to go vs conditional. Just my opinion…