Options from graphical card editor not properly stored in the final YAML

[xbaro]

My Home Assistant version: 2021.3.4

Layout-card version (FROM BROWSER CONSOLE): 2.2.3

The Layout Options box content is stored in a YAML field called "layout_options", and has no effect. When edited on the YAML editor and copied those options under the "layout" field, the options work fine.

[thomasloven]

Make sure to completely clear your browser cache. See instructions near the bottom of the install guide linked from the readme.

[Jpsy]

I don't think this is a caching issue.
I witness the same problem in Chrome and Safari and clearing the cache does not solve it.

What may be missing in the OP's report is that this is not happening for view layouts (which work fine), but for layout-cards.

Data entered into the field Layout options is stored in yaml under the key layout_options (see "Generated YAML code" below).
But the editor also creates a reference in the key view_layout that points to layout (which is empty).
The empty layout seems to overwrite the layout_options setting and the card does not work as expected.

Example:

Generated YAML code:

  type: 'custom:layout-card'
  layout_type: grid
  layout: &ref_0 {}
  cards: []
  layout_options:
    grid-template-columns: 1fr 1fr
  view_layout: *ref_0

Corrected YAML code (working):

  type: 'custom:layout-card'
  layout_type: grid
  cards: []
  layout_options:
    grid-template-columns: 1fr 1fr

[Jpsy]

I just discovered that the following YAML code works too:

  type: 'custom:layout-card'
  layout_type: grid
  layout: &ref_0
    grid-template-columns: 1fr 1fr
  cards: []
  view_layout: *ref_0

So to get it all working you have to use EITHER layout_options OR layout, but not both (as generated in a fresh Layout Card).

I also discovered, that the above code can be simplified (while still working) to this:

  type: 'custom:layout-card'
  layout_type: grid
  layout:
    grid-template-columns: 1fr 1fr
  cards: []

But I have a feeling, that the additional view_layout reference in the first version is generated for a reason.
view_layout as well as layout/layout_options both accept grid-* and place-self CSS styles. Is this overlapping functionality the deeper reason for referencing the layout field into the view_layout field?

If I get this right, view_layout is basically meant to style the card in reference to an outer View Layout, while layout/layout_options is meant to style the grid for the card itself and its children. But honestly, this is quite confusing when reading the docs. If you reference / mirror the content anyway, wouldn't it make sense to use just one single field to hold all grid-* styles no matter whether they act upward or downward in the card tree?

[Jpsy]

And one more finding:

The combination of layout and view_layout is the only version that currently works AND survives any editings.
All other combinations either don't work or are destroyed/modified with the next editing.
So this is currently the only stable solution:

type: 'custom:layout-card'
layout_type: grid
layout: &ref_0
  grid-template-columns: 1fr 1fr
cards: []
view_layout: *ref_0

To get there from a freshly generated Layout-Card you only have to replace the layout_options key by layout.

[omayhemo]

This worked for me

[omayhemo]

Whoops, nope these settings keep getting wiped out when I save. It's inconsistent. Sometimes they do sometimes they don't. We gotta get this fixed, before I'm gonna move forward with all my dashboard rewrites, it's consuming a lot of time fighting with it.

[Jpsy]

Strange. Seems stable for me if I follow the last code example.