🔹 Layout-card - Take control of where your cards end up

[paddy0174 (Patrick)]

Yepp, reading the new documentation. That should more or less easily fix your issue. I can tell from own experience.

[sd_dracula]

@VDRainer

url:

Not seeing the new Layout tab when I edit, as it is shown in the quick start video so not sure what is wrong
Also where is the location to add the url you mentioned?

[VDRainer]

Configuration > Lovelace Dashboards > Resources

[sd_dracula]

@VDRainer

/hacsfiles/lovelace-layout-card/layout-card.js?v=2

Still not there after adding v2 url and restarting

HACS also says I have one resource not loaded and it is the layout-card and I have to add back the url: /hacsfiles/lovelace-layout-card/layout-card.js

[thomasloven (Thomas Lovén)]

Try Home Assistant 21.3 or later.

[sd_dracula]

I have latest 2021.3.4, doesn’t make any sense on my PC the layout is fine, on any tablet the panel mode is being ignored. Maybe it just doesn’t work on the Home Assistant android app?
Or maybe column_width: 100% doesn’t work anymore on latest version?

[VDRainer]

Sorry, i’m using yaml mode and there are no issues wth HACS.

[ASNNetworks]

It doesn’t, that’s also why it’s left out in the ReadMe as an available option. column_width is not an option anymore. Not sure what you’re trying to achieve, perhaps the same as I used to have (full width 1 column).

See my post:

Layout-card - Take control of where your cards end up

Hi, so I read the ReadMe, but I can’t get my old setup to work with the new format. Perhaps I’m missing something, or maybe the feature is no longer working. I used layout-card inside a vertical-stack and lovelace with panelmode to true. The reason I did this, is because I have a custom made top and bottom bar with icons and notifications and in the center all my cards. I needed the cards to be a smaller width to not touch the borders of my screen. So basically: type: vertical-stack cards: - …

The explanation of Thomas:

Layout-card - Take control of where your cards end up

Many options have been removed for maintainability and to work with new features of Lovelace. For more fine-grained control, please try the grid layout instead.

And the solution by dmatik.

Layout-card - Take control of where your cards end up

Hi, I myself only started to learn the grid options, Thomas actually put link to CSS Grid page which was a big help, suggest you to go over it. Having said that, you can try something like this: - type: custom:layout-card layout_type: grid layout_options: grid-template-columns: 96% grid-template-rows: auto cards:

Change percentage to 100% for your use case.

[paddy0174 (Patrick)]

@sd_dracula

Or maybe column_width: 100% doesn’t work anymore on latest version?

Did you even read the instructions? Or do you just think of them as a nice, little side project for thomasloven. I mean, why should he have a family life if he can write instructions that are not read?

I’m sorry, but what you’re doing here is trying to get someone to do your stuff. READ the instructions, all you want to know (and asking) is written in there. And I can tell for sure, because I had the exact same problem with my tablet, but it solved itself after reading the instructions and changing my settings accordingly. And no, I won’t tell you how it’s done, because I’m not willing to give this behaviour any kind of support. Nevermind, why bother…read it or leave it…

If you have questions, that are not answered in the (not very long) instructions, I and others are more than willing to help.

[sd_dracula]

Sure did but no mention of that on the main page in github.
What I’m trying to do is simple, I need one card that takes the whole page width (the page is in panel mode) and then I have lots of cards inside it.
Tried this but still not using 100% of the width:

layout_type: grid

    layout_options:
      grid-template-columns: 100%
      grid-template-rows: auto

And what did this gridcols: auto 100px change into now? Getting closer to fixing it

[NdR (Andrea Montanari)]

At the end I figured out how to do it. As you did in your example, I used a Vertical Stack behind the secondary grid layout and It worked perfectly.

Thanks!

[Alindil]

Hi,
I would like to justify the layout-grid on the left but I don’t see how to do it.

I can see the property to do it but I don’t know how to put it in the yaml

Help me please

[thomasloven (Thomas Lovén)]

Try upgrading to 2.2.0

[Alindil]

I updated to 2.2.1 but I don’t see how to justify left

[thomasloven (Thomas Lovén)]

That should stretch the grid to the edges, then you can add an empty column to the right to space it out.

And there is no 2.2.1

[Ferador]

Hi, i just updated to the newest version, but now my view for my vacuum is kinda broken.
I tried to show you what i mean. The picture shows the view after the update and on the lower right the boxes show how it should look like/how it was before the update.

I already tried to edit the code, but the only thing i was able to fix (at least i hope so) was the outer grid.

type: vertical-stack
cards:
  - type: 'custom:button-card'
    color: auto
    name: Home
    styles:
      card:
        - height: 5px
    tap_action:
      action: navigate
      navigation_path: /lovelace-tablet/home
  - type: 'custom:layout-card'
    layout_type: grid
    layout_options:
      grid-template-columns: 400px 250px auto
    cards:
      - type: 'custom:xiaomi-vacuum-map-card'
        card_mod:
          style: |
            ha-card {
              background: none;
              box-shadow: none;
              height: 81%
            }
        entity: vacuum.wall_e
        map_camera: camera.wall_e_camera
        camera_calibration: true
        language: de
        debug: false
      - type: 'custom:layout-card'
        layout_type: vertical
        cards:
          - type: 'custom:layout-card'
            layout_type: horizontal
            layout_options:
              max_cols: 2
            cards:
              - type: vertical-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_esszimmer
                    icon: 'mdi:table-chair'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_flur
                    icon: 'mdi:door'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_kueche
                    icon: 'mdi:stove'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                view_layout:
                  column: 1
              - type: vertical-stack
                cards:
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_schlafzimmer
                    icon: 'mdi:bed'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_speisekammer
                    icon: 'mdi:food'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                  - type: button
                    tap_action:
                      action: toggle
                    entity: script.vacuum_wohnzimmer
                    icon: 'mdi:sofa'
                    show_name: false
                    card_mod:
                      style: |
                        ha-card {
                          background: none;
                          box-shadow: none;
                          width: 100%
                        }
                view_layout:
                  column: 2
            view_layout:
              column: 1
          - type: button
            tap_action:
              action: toggle
            entity: script.wall_e_entlehren
            icon: 'mdi:trash-can'
            show_name: false
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  width: 100%
                }
            view_layout:
              column: 1

What am i missing?

[Amishman]

What you need to do to make it span 100% is follow the Quick Start steps.

Do not select Panel mode.

Select Grid instead of Masonry.

Open up the view properties again and go to the “Layout” tab.
Enter the size of the column and rows you would like:

grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%
grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%

Then press the Add Card button and select the card you would like.
Make any adjustments using the GUI and then press the Show Code Editor.
Add the placement.

Either of these will work.

view_layout:
  grid-column: 1 / 3
  grid-row: 7 / 9

or

view_layout:
  grid-column-start: 1
  grid-column-end: 3
  grid-row-start: 7
  grid-row-end: 9

Here is an example:

type: gauge
entity: sensor.openweathermap_temperature
min: 0
max: 100
name: Temp
view_layout:
  grid-column: 1 / 3
  grid-row: 7 / 9

You can also change/add things by clicking on the 3 vertical dots in the upper right hand corner and selecting Edit Dashboard and then Raw Configuration Editor.

Hope this helps.

[thomasloven (Thomas Lovén)]

FROM 2.2.0 THE CARD OPTION layout IS CALLED view_layout

This was done to avoid collisions with parameters for other popular custom cards, and done in collaboration with their developers and the frontend dev team.

I updated your example code @Amishman. Hope you don’t mind.

@Ferador The horizontal layout will by default try to give each column at least 300 px of width. Play around with the width option, or try a grid layout for your red and green box.

[Amishman]

Thanks for correcting the code @thomasloven. I didn’t know there was an update.

[Vlavonvidden]

@thomasloven Thanks for the latest changes. This is simply awesome, media queries are so useful !