Left alignment shifts inward when using layout-card with unequal columns (e.g., 280/100) under a 380px block

Configuration Frontend
1

I’m trying to place a 2-button row under a 380px-wide status block. With unequal columns (e.g., 280px and 100px) using custom:layout-card, the left edge of the row shifts inward compared to the status block above. With equal columns the alignment is fine. This happens both with Tile and with Mushroom template cards.

The goal is simple: 380px container, same 4px L/R padding as the status block, and a 2-column row (wide “Start” + narrow “Off”) that aligns exactly left with the status block.

HA-align
HA-align313×214 7.25 KB

Minimal Reproducible Examples

type: custom:mod-card
style: |
  :host { display:block; width:380px; margin:0; }
card:
  type: custom:layout-card
  layout_type: grid
  layout:
    grid-template-columns: 280px 100px
    grid-gap: 0
  card_mod:
    style: |
      /* match status block’s horizontal padding */
      ha-card { background:none; box-shadow:none; border:none; padding:0 4px !important; margin:0 !important; }
      .card-content, #root { padding:0 !important; margin:0 !important; }
  cards:
    - type: tile
      entity: switch.tapw_timeprogram_bms_forced_qube2
      name: Tapwater starten
      icon: mdi:hot-tub
      vertical: false

    - type: tile
      entity: switch.tapw_timeprogram_bms_forced_qube2
      name: Uit
      icon: mdi:power
      vertical: false

What I tried (all still show the indent with 280/100)

  • Wrapping with one or two mod-card layers to match the status block’s exact padding (4px L/R).
  • Zeroing out internal paddings/margins via card_mod on ha-card, .card-content, and #root.
  • Forcing place-items, justify-content, align-content on layout.
  • Putting status block and button row in a single stack-in-card to avoid cross-card chrome—indent remains with unequal columns.
  • Switching card types (Tile ↔ Mushroom): same alignment issue when columns are unequal.

Questions

  • Is this expected interaction between layout-card and the inner cards when column widths are unequal?
  • Is there a recommended pattern to get pixel-perfect left alignment under a fixed-width block (380px with 4px L/R padding) while using 280/100 columns?
  • If this is a bug, should I open it in Core Frontend (for Tile/Mushroom rendering) or in the layout-card repo (grid wrapper), or both?

Extra context

  • A plain button-card row with fixed widths aligns fine; the misalignment only appears with Tile/Mushroom in layout-card when the columns are unequal.
  • I can provide before/after screenshots (status block above; two-column row below) that clearly show the left indent.

Thanks for any guidance or workarounds!

2

No one? Question unclear? Stupid question, wrong forum?
Please advise

3

Much better place is a dedicated thread. Same approach for ANY custom card.
Suggest to remove card-mod from both places & then try step by step.
BTW, in both places a card-mod code is wrong:
– no “card_mod” keyword is specified on a mod-card level;
– no need to use card_mod on a layout-card level - it is not supported here since layout-card does not have ha-card & thus should be wrapped into mod-card (as you did - but forgot to add the mentioned keyword).
Anyway, suggest to use the main thread.

4

Thanks for tip. I missed the dedicated threat. I raised my question there.