Wrong Layout

[Mattia2399]

Can anyone tell me why elements are often out of place when the page loads? It happens to me with several cards that use layout:card inside custom:stack-in-card.

I attach the code:

`type: custom:stack-in-card
mode: horizontal
cards:

• type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
  grid-template-columns: 50px auto
  grid-gap: 0px
  margin: "-4px -4px -8px -4px"
  cards:
  • type: custom:mushroom-template-card
    primary: ""
    secondary: ""
    icon: mdi:sd
    entity: sensor.disk_use_percent_config
    icon_color: grey
    tap_action:
    action: more-info
    card_mod:
    style: |
    ha-card {
    box-shadow: none;
    background: none;
    }
  • type: custom:bar-card
    entity: sensor.disk_use_percent_config
    name: Spazio
    color: rgba(var(--cstm-rgb-on), 0.4)
    height: 42px
    min: "0"
    max: "100"
    entity_row: false
    positions:
    icon: "off"
    indicator: "off"
    card_mod:
    style: |
    ha-card {
    padding: 0px;
    margin: -4px 0px -4px 0px;
    box-shadow: none;
    background: none;
    --bar-card-border-radius: 14px;
    }
    bar-card-value {
    margin: 12px;
    font-size: 14px;
    font-weight: bolder;
    }
    bar-card-name {
    margin: 12px;
    font-size: 14px;
    font-weight: bolder;
    }
    bar-card-backgroundbar {
    opacity: 0.2;
    filter: brightness(1);
    }
    card_mod:
    style: |
    ha-card {
    background: var(--card-background-color) !important;
    backdrop-filter: blur(10px);
    opacity: 0.9 !important;
    -webkit-backdrop-filter: blur(10px) opacity(0.8) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    `