Lovelace layout: center column, then left then right

Configuration
1

Hello.

I would like to have the following layout in home assistant:

  • imagine the “vertical layout”, so it goes from the top left “column” in your dashboard, first in the bottom, and it fill each column from left to right (in a weird way to my opinion).
  • now instead of starting in the top left, you start by the center column (if the number of columns is odd).

Now you can have:

  • in your wallpanel / computer, the most important information at the center (ex: clock, temperature, forecast), and in the left and right column other card
  • on your mobile phone, the important information is now top.

I cannot have this behavior today, is did I miss something in the magic world of hass layout ?

Thanks.

2

You probably could, but it requires some work, and it is a bit of a workaround. The new release came with conditional cards based on screen size. From the screen size you can infer how many columns would fit. And so you can order your layout per screen size. But it would mean duplicating layouts, unless you write your dashboard in yaml mode.

3

I see, using yaml anchors. But it is a pain to maintain over time

4

Layout card grid seems to do the job:


    type: custom:grid-layout
    layout:
      grid-template-columns: 33% auto 33%
      grid-template-rows: auto
      grid-template-areas: |
        "header header header"
        "messages messages messages"
        "secondary primary third"
        "footer footer footer"
      mediaquery:
        '(max-width: 600px)':
          grid-template-columns: 100%
          grid-template-areas: |
            "header"
            "messages"
            "primary"
            "secondary"
            "third"
            "footer"
        '(max-width: 800px)':
          grid-template-columns: 50% 50%
          grid-template-areas: |
            "header header"
            "messages messages"
            "primary primary"
            "secondary third"
            "footer footer"
```