Grid card not compatible with sections

Nickduino commented 2 days ago

Checklist

[X] 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

The grid card doesn't accept the layout_options: argument (see my yaml below: all gauges should be 1x1).

(These are way too big)

Describe the behavior you expected

(This is my expected output: it's a screenshot of 1x1 gauges that aren't in a grid)

If I try forcing the whole grid card to be 3x2, I get an output that is still not the right size and doesn't fit in a 3x2:

Steps to reproduce the issue

Using this code, I would expect the grid to be constituted of 1x1 gauges but they're much bigger.

square: false
type: grid
cards:
  - type: gauge
    entity: sensor.ozone_clermont_ferrand
    name: O₃
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.dioxyde_d_azote_clermont_ferrand
    name: NO₂
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.dioxyde_de_soufre_clermont_ferrand
    name: SO₂
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.pm10_clermont_ferrand
    name: PM10
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1
  - type: gauge
    entity: sensor.pm25_clermont_ferrand
    name: PM25
    min: 0
    max: 7.5
    segments:
      - from: 0
        color: transparent
      - from: 0.5
        color: "#50F0E6"
      - from: 1.5
        color: "#50CCAA"
      - from: 2.5
        color: "#F0E641"
      - from: 3.5
        color: "#FF5050"
      - from: 4.5
        color: "#960032"
      - from: 5.5
        color: "#872181"
      - from: 6.5
        color: "#888888"
        label: "!!!"
    needle: true
    layout_options:
      grid_columns: 1
      grid_rows: 1

What version of Home Assistant Core has the issue?

2024.10.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Chrome Version 129.0.6668.60

Which operating system are you using to run this browser?

Windows 10

State of relevant entities

Supervisor 2024.10.0
Operating System 13.1
Frontend 20241002.2

Nickduino commented 2 days ago

Some will say the whole point of Section is to avoid fixing things in a grid. But there are elements you don't want to flow in an inorganized manner.

Connected issue: the grid card doesn't allow you to mix cards of different grid size. Here is what I would truly want to achieve:

ChristophCaina commented 2 days ago

there is always an edge case where you need some kind of stack card - grid, vertical or maybe horizontal stack card.

For example, the only way to show three tile cards within a stack is by using the following layout: 1:2:1

If you want to show three tiles with the same size in a row, that's only possible with a horizontal stack:

As long as the Section does not support such layout options by default, using a stack is in my eyes a valid point - also as shown in the example above.

Nickduino commented 2 days ago

I'm afraid I don't follow you

home-assistant / frontend