Visual card editor preview always shows 12 column (1 section column) version

[Liquidmasl]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

Unsure if bug or missing feature.. But since multiple column spanning sections and cards are implemented, this seams to be an oversight, which i would categorize as bug.

When having a section in the sections view that spans more then 1 column, the card itself can span more then 12 columns, 12 columns per section column width to be exact.
But the preview in the visual card editor always shrinks the card down, caps it to 12 columns.

I understand that it is somewhat necessary to also show the 12 column version for mobile? maybe? but in this case this would need a toggle.
currently its not possible to check how the card looks without saving changes and looking at it on the dashboard.

---

In the dashboard

---

In the editor preview

Describe the behavior you expected

preview should preview the card like it will look on the dashboard

Steps to reproduce the issue

1. section view with eg. 6 max section columns
2. make new section and set it to use 6 columns
3. make full width card
4. do something with it, look at the preview
5. save in and compare how it looks on the actual dashboard
   -> its not the same
   ...

What version of Home Assistant Core has the issue?

2026.3.4

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Google Chrome 132.0.6834.160 (Official Build) (64-bit)

Which operating system are you using to run this browser?

Win 11

State of relevant entities

Problem-relevant frontend configuration

dashboard yaml:


  - type: sections
    max_columns: 6
    title: testtest
    path: testtest
    sections:
      - type: grid
        cards:
          - type: heading
            heading: New section
          - square: false
            type: grid
            cards:
              - type: button
                entity: light.gang_spots
              - type: entity
                entity: sensor.backup_backup_manager_state
              - type: button
                entity: light.gang_spots
              - type: button
                entity: light.gang_spots
              - type: button
                entity: light.all_rgb
              - type: button
                entity: light.grp_livingroom_small_lights_group
              - type: button
                entity: light.grp_livingroom_small_lights_group
            grid_options:
              columns: 72
              rows: 1
            columns: 12
        column_span: 6

JavaScript errors shown in your browser console/inspector

Additional information

Why does that happen?

I stumbled through the dev tools, and I think the main issues are..

1. max width of the preview

the <hui-section preview class> element has max-width: var(--ha-view-sections-column-max-width,500px);
This is missing a multiplicator for the amount of columns, and also the var here is not set, so it defaults to 500 (which might be fine).
so with max-width: var(--ha-view-sections-column-max-width,500px) * var(--column-span, 1); this should be fine.

not currently, since --column-span is not set.. more below.

2. number of columns in the preview

the <div class="container "> element a few levels down has

--grid-column-count: calc(
            var(--base-column-count) * var(--column-span, 1)
          );

Which _looks_fine, but the --base-column-count is not set, so it defaults to 1 again.

Fixing those 2 things leads to the preview actually previewing the final look of the card.

Resulting issues

Obviously this is not fully without issue. There are a few enhancements that will be nice following...

• There still needs to be enough space on the screen to actual show the preview. So it might be wise to.. cap the container width to the available viewpoert anyway, but just scrolling out in the browser would still allow to preview the card.
  • -> resulting feature request: toggle in the preview to show 12 column (1 section column) version of the card, to preview how it will look on mobile
• Even with expanded editor window (... for the few people that know those can be expanded), there might not be enough space to preview the card without zooming out the homepage.
  • -> resulting feature request: let us 'slide' the middle separator between preview and editor left and right, its unecessary to have 50% of the screen be the editor, and so little the preview OR SOMETIMES, the other way around. (maybe sliding isnt even necessary, 3 presets would be enough. big editor, small preview, 50/50, small editor big preview.

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[Liquidmasl]

Issue still persists in the newest version

Installation method
Home Assistant OS

Core
2026.6.4

Supervisor
2026.06.2

Operating System
18.0

Frontend
20260527.7