New Experimental dashboard cannot reduce card as masonry in mushroom

[platini761 (Platini76)]

I reported also here:

Stack In card Cannot be reduced in new version 2024.3 experimental dashboard

Description of problem:
I try to reproduce the old masonry layout as in picture:

but I see that card is now extended to all line and cannot be reduced as previously

Additional information:

my code if someone can help me:

type: custom:stack-in-card
cards:
  - type: custom:mushroom-template-card
    primary: Serratura Ingresso
    secondary: |-
      {% if is_state('lock.serratura_ingresso','unlocked')%}
        Aperta
      {% else %}
        Chiusa
      {% endif%}
    icon: |-
      {% if is_state('lock.serratura_ingresso','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    layout: horizontal
    icon_color: |-
      {% if is_state('lock.serratura_ingresso','locked') %}
        red
      {% else %}
        green
      {% endif%}
    badge_icon: >
      {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
      %}

      {% if battery_level == 100 %}
        mdi:battery
      {% elif battery_level > 0 %}
        mdi:battery-{{ battery_level }}
      {% else %}
        mdi:battery-alert-variant-outline
      {% endif %}
    badge_color: |-
      {% set battery_level = states(entity) | int %}
      {% if battery_level > 90 %} 
        green
      {% elif battery_level > 60 %}
        light-green
      {% elif battery_level > 50 %}
        lime
      {% elif battery_level > 40 %}
        yellow
      {% elif battery_level > 30 %}
        amber
      {% elif battery_level > 20 %}
        orange
      {% elif battery_level > 10 %}
        deep-orange
      {% else %}
        red
      {% endif %} 
    tap_action:
      action: more-info
    entity: sensor.serratura_ingresso_battery_level
    card_mod:
      style: |
        ha-card {
          border: none;
          margin-bottom: -6px;
        }
  - type: custom:mushroom-lock-card
    entity: lock.serratura_ingresso
    name: Serratura Ingresso
    primary_info: none
    secondary_info: none
    icon_type: none
    layout: vertical
    card_mod:
      style: |
        ha-card {
          border: none;
          margin-top: -6px;
        }

[boheme61]

first i have hard to understand your Topic header , as you use not 1 but 2 Custom-Cards, and Card-mod … Beside Why even borther to report a “bug” in the " Stack-In-Card Github repo ? , didn’t you noticed, that Nothing have change the past 4 Years ! , in that Card/Repo … Considered it “Dead” ( or still alive and well, working as intended )

@platini761

I try to reproduce the old masonry layout as in picture:

Noone can hard know what you mean by that, and Grid does not “by Nature” behave same way as Masonry

A “workaround” or actually common way, is using native vertical or horizontal stack, or custom:card, to accomplice the same, with less restrict options

Beside, with Mushroom And Card-mod(as you use), i wonder why you even have issues, with sizing your cards

[iridris (Steven)]

It looks like there may be a new feature coming to configure the number of rows/columns a card uses.

Add layout options to cards and improve grid and sections defaults

[platini761 (Platini76)]

I am not pro in this matter but I think, to make all such mods to a card I have to use:
custom:mushroom-template-card

and when I use it… card occupy all the space…

[boheme61]

ok, yes nothing wrong with mushroom-cards, i use them my self but for cards with many templates i turned over to custom:button-card, one can use grids also, and set height/width on the card

[platini761 (Platini76)]

can you please help me with the code to obtain about the same graphic result on this lock door?

[boheme61]

Wait for the coming changes/features, in the link Steven posted above, might solve your issue ( as Paul, the author of mushroom, atleast will ad features to the Section-View, and cards, like tile, and most likely some of mushroom-cards

btw , by default mushroom cards fill the available space, so if you only place 1 in a row, it fills the row, same as if you only put 1 card in a grid-cell, or a horizontal/vertical stack

But first of all, you don’t seem to be familiar with with the 4-Year-old-no-changes-card ( with btw, alot other alternative for the same )
So IF you take time to read the GitHub page, card configurations/features/examples(the very first example), i think you would not have to open this Topic, and blame New Experimental Dashboard, beside open a “bug report”

by default Stack-in-card is Vertical, meaning card under card under card
Horizontal means side by side by side

type: horizontal-stack
cards:
  - type: custom:mushroom-template-card
    primary: Serratura Ingresso
    secondary: |-
      {% if is_state('lock.serratura_ingresso','unlocked')%}
        Aperta
      {% else %}
        Chiusa
      {% endif%}
    icon: |-
      {% if is_state('lock.serratura_ingresso','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    layout: horizontal
    icon_color: |-
      {% if is_state('lock.serratura_ingresso','locked') %}
        red
      {% else %}
        green
      {% endif%}
    badge_icon: >
      {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
      %}

      {% if battery_level == 100 %}
        mdi:battery
      {% elif battery_level > 0 %}
        mdi:battery-{{ battery_level }}
      {% else %}
        mdi:battery-alert-variant-outline
      {% endif %}
    badge_color: |-
      {% set battery_level = states(entity) | int %}
      {% if battery_level > 90 %} 
        green
      {% elif battery_level > 60 %}
        light-green
      {% elif battery_level > 50 %}
        lime
      {% elif battery_level > 40 %}
        yellow
      {% elif battery_level > 30 %}
        amber
      {% elif battery_level > 20 %}
        orange
      {% elif battery_level > 10 %}
        deep-orange
      {% else %}
        red
      {% endif %} 
    tap_action:
      action: more-info
    entity: sensor.serratura_ingresso_battery_level
    card_mod:
      style: |
        ha-card {
          border: none;
          margin-bottom: -6px;
        }
  - type: custom:mushroom-template-card
    primary: Serratura Ingresso
    secondary: |-
      {% if is_state('lock.serratura_ingresso','unlocked')%}
        Aperta
      {% else %}
        Chiusa
      {% endif%}
    icon: |-
      {% if is_state('lock.serratura_ingresso','unlocked') %}
        mdi:lock-open
      {% else %}
        mdi:lock
      {% endif%}
    layout: horizontal
    icon_color: |-
      {% if is_state('lock.serratura_ingresso','locked') %}
        red
      {% else %}
        green
      {% endif%}
    badge_icon: >
      {% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
      %}

      {% if battery_level == 100 %}
        mdi:battery
      {% elif battery_level > 0 %}
        mdi:battery-{{ battery_level }}
      {% else %}
        mdi:battery-alert-variant-outline
      {% endif %}
    badge_color: |-
      {% set battery_level = states(entity) | int %}
      {% if battery_level > 90 %} 
        green
      {% elif battery_level > 60 %}
        light-green
      {% elif battery_level > 50 %}
        lime
      {% elif battery_level > 40 %}
        yellow
      {% elif battery_level > 30 %}
        amber
      {% elif battery_level > 20 %}
        orange
      {% elif battery_level > 10 %}
        deep-orange
      {% else %}
        red
      {% endif %} 
    tap_action:
      action: more-info
    entity: sensor.serratura_ingresso_battery_level
    card_mod:
      style: |
        ha-card {
          border: none;
          margin-bottom: -6px;
        }

and fix your second card

    primary_info: none
    secondary_info: none
    icon_type: none

[platini761 (Platini76)]

thanks for your help but it is not what I want…
the reason why I use stack in custom is that I want to have lock icon red when closed and green when open, and I want to see battery level… is ther a way to change the normal card in that way without use custo m card?

[boheme61]

You initially post was sizing of a mushroom card in a grid-cell.
with horizontal-stack(or stack-in-card#horizontal) you get the 2 cards, beside each other.

Sorry i don’t have any lock card, and btw stack-in-card has nothing to do with this, stack/grid cards are just place holders, for the “orig” card.

what’s wrong with mushroom ?
Changing color can either be accomplished with template , card-mod or Theme settings, if the native/custom card doesn’t provide this option.
If you haven’t got much experience in “nested cards” the only native card i can think of is Picture-elements card , IF you want additional sensors in the card.
With a little fantasy/creative mind, you can add anything to it.

and with nested cards in a grid cell(or grid in grid), you can use 2-4 Tile-cards, and make it look like 1. And they have alot of default options, such as different colors etc