[Solved] Section Layouts: Rows, Columns, & CardMod Question | Home Assistant | Page 1

cloud sigil Jul 5, 2025, 11:49 PM

#

I'm trying to build a tap-action jukebox in lovelace, and whilst all the functionality is there, It'll be for a tablet more than on a PC/Laptop. Between the number of columns in sections & cards, I just can't seem to get the images to line in such a way that it would be 4 picture cards across 2 columns, and a third column for a media player card; all fitting into a tablet screen with 3 total columns.

I nearly managed it in masonry mode, but eventually there were too many picture cards and they spilled over below the media player.

Are there any tricks and tips one can play around with for grid values, or am I going to have to delve into custom:layout-card (grid)? I have installed it via HACS, but I just couldn't seem to access even the grid option in the GUI, it's like it's not installed at all (it definitely is, I can insert manual break cards)

#

short pike Jul 6, 2025, 1:43 AM

#

IMO, the layout-card is going to be the best option because you're wanting to design a very specific layout. Masonry and Section views are nice, but they're not intended to provide that much control.
If you want to use the layout-card for the entire view, I would use the Panel (single card) layout. Then, you'll add the layout-card as the card. But, after that, the rest of your cards have to be defined in that card. This essentially makes the UI Preview worthless and you'll have to work totally in YAML with the Editor.

#

Here's a layout that you can use to test with. In this example, four graph cards each take up 25% of the screen. (Just change the entities and it should render properly.)```yaml
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 50% 50%
grid-template-rows: 50vh 50vh
overflow: hidden
grid-template-areas: |
"Graph1 Graph2"
"Graph3 Graph4"
cards:

type: custom:mini-graph-card
entities:
- sensor.freezer_temperature
- sensor.refrigerator_temperature
  view_layout:
  grid-area: Graph1
type: custom:mini-graph-card
entities:
- sensor.freezer_temperature
- sensor.refrigerator_temperature
  view_layout:
  grid-area: Graph2
type: custom:mini-graph-card
entities:
- sensor.freezer_temperature
- sensor.refrigerator_temperature
  view_layout:
  grid-area: Graph3
type: custom:mini-graph-card
entities:
- sensor.freezer_temperature
- sensor.refrigerator_temperature
  view_layout:
  grid-area: Graph4

#

I just want you to see how the layout: section is set up and how the individual cards are "assigned" to a specific area.

#

This one would probably be more along the lines that you would use (just with not as many areas).yaml layout: grid-template-columns: auto 30px 25% grid-template-rows: auto grid-template-areas: | "header header header" "main . sidebar" "footer footer footer" Note the column sizes. Yours might be something like 67% 33%. You could even do something like auto 5px 33% to be able to put that spacing between the two columns.

#

This is the layout that I use on the 24" touchscreen. yaml type: custom:layout-card layout_type: grid layout: grid-template-columns: 50% 50% grid-template-rows: auto grid-template-areas: | "header header" "lights media" "column1 column2" "bottom_left bottom_right" The bottom_left and bottom_right areas are kind of unique because I use card_mod to "pin" those to the bottom corner. (Column1 and column2 are just unused space for the time being.) I use a custom:mod-card with the following: ```yaml
card_mod:
style: |
ha-card {
border: none;
background: transparent;
position: fixed;
bottom: 0px;
right: 0px;
width: 800px;
}

cloud sigil Jul 6, 2025, 7:43 AM

#

Ah, time to see how I rusty I've gotten. I remember doing everything by YAML in the early early days.

Thanks very much for the example config, I'll play around with it today and see what I can whip up!

cloud sigil Jul 6, 2025, 8:56 AM

#

If I'm reading this correctly, then it's mandatory for 'one' card per area, so my areas for all those buttons (let's say 2 buttons in a horizontal stack) should look something like this? :

grid-template-columns: 33% 33% 34% 
grid-template-rows: auto
grid-template-areas: |
  "header header header"
  "button1 button2 mediaplayer"
  "button3 button4 empty1"
  "button5 button6 empty2"
  "button7 button8 empty3"

If I don't have anything marked:

view_layout:
  grid-area: emptyX

..then the mediaplayer area just fills the lower gap on the right?

(the 33% 33% 34% would be for testing, and then manually adding 5px spacers and amending the percentages after the functionality is there, per your suggestion)

#

Just realised, spaces in the names, edited.

short pike Jul 6, 2025, 8:59 AM

#

I think a better (perhaps preferred method) is to replace each of the emptyxs with mediaplayer. Then, it will span across the rows.

#

Also, I don't think each of your buttons needs a specifically defined area. Instead, perhaps something more like this is all you need.

grid-template-columns: 33% 33% 34% 
grid-template-rows: auto
grid-template-areas: |
  "header        header        header"
  "button_area   button_area   mediaplayer"
```The button_area will be the grid card or whatever you use to *contain* those buttons.

cloud sigil Jul 6, 2025, 9:03 AM

#

I did think that, but if it's 'one' card per area, would that mean I have to have the top card inside the grid card as a vertical stack, containing multiple horizontal stacks, containing multiple buttons?

#

Or have I made wrong assumptions and one card per area not mandatory at all, and it just squeezes them into it in the order they're listed?

short pike Jul 6, 2025, 9:11 AM

#

Right now, you're setting up the "general" layout, where stuff is going to go. Assuming the mediaplayer is already in a vertical-stack, you would just need to set it to that area. ```yaml

type: vertical-stack
view_layout:
grid-area: mediaplayer
cards:
- type: markdown
  content: Now Playing
- type: <<whatever else you have set up for the rest >>

#

Also, note that the header is not the header from HA. It would allow you to make your own "header" (like in a horizontal-stack). You can remove it if you're not looking to do that. Or, if you don't define something to go there, it just won't be rendered. (Something like this comes in handy when you're using a dashboard in YAML mode and you can use an !include to define the header in its own file but use it across multiple views.)
References: my dashboard showing the !include LINK and the actual header.yaml

cloud sigil Jul 6, 2025, 9:18 AM

#

Headers can go out the window, that's fine, and the mediaplayer side I'm not worried about. That's just two cards in a vertical stack, like you said.

What I'm struggling to grasp is the correct method to fit 16-20 tap-action buttons in the button_area? If button area is only defined once per column, and multiple areas of the same name create spanning, then I can just plug the picture-card buttons into it without vertical stacks, or would I need to have nesting something like this per column:

button_area
└─ vertical-stack
   ├─ horizontal stack
   ├─ horizontal stack
   └─ horizontal stack

short pike Jul 6, 2025, 9:22 AM

#

Follow the LINK above. Look at the lines just under the !include. ```yaml
- type: horizontal-stack
view_layout:
grid-area: lights
cards:
- type: vertical-stack
cards:
- type: custom:button-card
template: generic_custom_button
entity: light.living_room_lights
name: Living Room

#

Ignore all of the hold_action stuff. It is used for browser_mod popup stuff.

#

That entire horizontal-stack card fits into the lights area.

cloud sigil Jul 6, 2025, 9:25 AM

#

Okay, yep, so you've done the same thing, just vertical under horizontal rather than horizontal under vertical, I think I get it.

short pike Jul 6, 2025, 9:29 AM

#

Yup. Those areas that I've defined simply correlate to some other type of layout card, whether it is a horizontal-/vertical-stack, grid, etc. and then all of the respective cards are in those.

cloud sigil Jul 6, 2025, 9:31 AM

#

Alright, back to tinkering, thanks for the pointers so far 👍

short pike Jul 6, 2025, 9:42 AM

#

In theory, you should be able to drop your current code into this new layout and just set the grid-areas. Indentation is super important though. You'll have something like this: ```yaml
type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 33% 33% 34%
grid-template-rows: auto
grid-template-areas: |
"button_area button_area mediaplayer"
cards:

type: vertical-stack
view_layout:
grid-area: mediaplayer
cards:
- type: markdown
  content: Now Playing
- type: <<whatever else you have set up for the rest >>
type: grid
columns: 6
view_layout:
grid-area: button_area
cards:
- type: <<whatever you have set up for the buttons >>

cloud sigil Jul 6, 2025, 9:45 AM

#

..and because there's two button_areas defined, I wouldn't have to muck around with v/h stacks because grid-card would just fill the max number of columns before creating the next row automatically, presumably. Good shout, lets give it a go!

short pike Jul 6, 2025, 9:47 AM

#

Technically, only one button_area is defined; it just spans across two columns. It is the same as this: ```yaml
grid-template-columns: 66% 34%
grid-template-rows: auto
grid-template-areas: |
"button_area mediaplayer"

Or even the same as this: ```yaml
  grid-template-columns: 11% 11% 11% 11% 11% 11% 34% 
  grid-template-rows: auto
  grid-template-areas: |
    "button_area   button_area   button_area   button_area   button_area   button_area   mediaplayer"

Why would you want to do something like this though: perhaps to have more areas to use under the button_area:

    "button_area   button_area   button_area   button_area   button_area   button_area   mediaplayer"
    "Something1    Widget        clock         I_Dunno       I_Dunno       .             mediaplayer"```

cloud sigil Jul 6, 2025, 9:50 AM

#

Shiny. Will give that a crack, maybe keeping the three column layout as a placeholder for the auto 5px 35% layout from earlier.

cloud sigil Jul 6, 2025, 10:08 AM

#

Hm. Is it particularly finicky with sections in progress? I've gone grid, but everything's just sitting in one column now.

views:
  - title: Home
    type: panel
    icon: mdi:radio
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: auto 5px 35%
          grid-template-rows: auto
          grid-template-areas: |
            "button_area   .   mediaplayer"
        cards:
          - type: grid
            square: true
            columns: 6
            view_layout:
              grid-area: button_area
            cards:

          - type: vertical-stack
            view_layout:
              grid-area: mediaplayer
            cards:

#

#

(and yeah, since going grid, tried going back to 5px spacer)

short pike Jul 6, 2025, 10:12 AM

#

try changing the layout_type to just grid: ```yaml
type: custom:layout-card
layout_type: grid

cloud sigil Jul 6, 2025, 10:13 AM

#

No dice.

short pike Jul 6, 2025, 10:15 AM

#

Just changed it on mine. I think both are acceptable. I'm confused as to why they're not cooperating. Try removing the 5px column and the . from the areas.

cloud sigil Jul 6, 2025, 10:16 AM

#

Still nothing.

#

I had started working on the v/h stacks before you mentioned the HA Grid card and got a couple of buttons in to see it working side by side, so if the worst comes to the worst I can go back to that route, but this is odd.

short pike Jul 6, 2025, 10:19 AM

#

Does the UI Preview at least show that it is trying to work? This is from the mockup that I posted earlier.

cloud sigil Jul 6, 2025, 10:20 AM

#

No, UI preview's showing the same as as the page outside of edit mode.

#

Weirdly though it is showing the proper CSS compared to the saved page 😂

#

short pike Jul 6, 2025, 10:27 AM

#

I'm at a loss as to why it is not working. It is starting to come together on my side.

#

type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: auto 34%
  grid-template-rows: auto
  grid-template-areas: |
    "button_area   mediaplayer"
cards:
  - type: vertical-stack
    view_layout:
      grid-area: mediaplayer
    cards:
      - type: markdown
        content: |
          <font size=6><center>Now Playing</font>
      - type: custom:mini-media-player
        entity: media_player.bathroom_alexa
  - type: grid
    columns: 6
    view_layout:
      grid-area: button_area
    cards:
      - type: button
        entity: light.living_room_lights

#

Do you have the view layout set to Panel (single card)?

cloud sigil Jul 6, 2025, 10:30 AM

#

Yep, although the UI is slightly different, I've got radio buttons.

#

If it makes the blindest bit of difference, running in Docker with these versions:
Core 2025.5.3
Frontend 20250516.0

short pike Jul 6, 2025, 10:32 AM

#

I have this at the bottom of my configuration that you don't have (although I don't think it should matter.)

#

And a couple of different options.

cloud sigil Jul 6, 2025, 10:34 AM

#

Yeah, I was looking into layout card yesterday and noticed a lot of my UI was different from the guide on Thomas' github - initially it made me think it wasn't installed correctly or resources not being properly called, but I can't find any evidence to support that, and I can use the included 'break' cards, so I'm pretty sure it's all fine and dandy from the HACS download, and referenced properly in configuration.yaml

short pike Jul 6, 2025, 10:35 AM

#

Go to a different view and Add Card. Do you see this is you search for layout?

cloud sigil Jul 6, 2025, 10:35 AM

#

Curious.. I'm missing one.

short pike Jul 6, 2025, 10:35 AM

#

was different from the guide on Thomas' github
It hasn't been updated in a long time...
referenced properly in configuration.yaml
You shouldn't have to do that if installed through HACS.

short pike Jul 6, 2025, 10:36 AM

#

cloud sigil Curious.. I'm missing one.

Interesting.

cloud sigil Jul 6, 2025, 10:37 AM

#

You shouldn't have to do that if installed through HACS

Mine's an old-school installation and I haven't done a fresh one in a long time; I'm only semi-migrated to the new UI stuff, so any time I install something from HACS I get a pop-up saying I need to define it in config before it'll work.

#

My config is still largely yaml-based.

#

e.g. changing home lat/long or currency, metric measurements etc.

#

Right card and right version perhaps?

I assume so, says the last activity was only 2 months ago.

short pike Jul 6, 2025, 10:43 AM

#

Yeah. That's the right one. I think you might have a conflict with Resources. But, I'm hesitant to try to troubleshoot the problem as I don't really deal with them. My installation is about five years old and I've pretty much done everything via HACS. Nothing really added manually. Perhaps uninstalling layout-card in HACS and then reinstalling will get everything back in order (provided there is nothing set in configuration.yaml)... 🤷‍♂️

cloud sigil Jul 6, 2025, 10:44 AM

#

Yeah, I'm thinking that may be the best bet. Let's give it a whirl.

#

aha

#

I think I already had a much older version of it pre-defined before HACS was a thing.

short pike Jul 6, 2025, 10:48 AM

#

It's weird that you're don't getting configuration errors when trying to use the layout-card, though. (Although, I have noticed some older cards don't show up in the Add Card dialog.)

#

The last update for layout-card is titled "Fixes for 2025.5".

cloud sigil Jul 6, 2025, 10:55 AM

#

Yep, got the raw file off of github. Downloaded, referenced locally, shows as a resource in dashboard gui, re-spun up the docker container just to be safe, and still no change.

#

Break card, but nothing else.

short pike Jul 6, 2025, 10:56 AM

#

Refresh browser/app, too?

cloud sigil Jul 6, 2025, 10:57 AM

#

Literally doing as we speak 😄

#

Waaaay

#

There we go

#

And wouldya look at that..

#

#

Much obliged!
..and back to yaml-fidgeting.

cloud sigil Jul 6, 2025, 11:36 AM

#

Winner winner, chicken dinner.

#

Thank you so much for all your help.

Is https://buymeacoffee.com/d_sellers1 still the best place to tip?

short pike Jul 6, 2025, 11:07 PM

#

cloud sigil Thank you so much for all your help. Is https://buymeacoffee.com/d_sellers1 sti...

Good to see that it all came together. buymeacoffee is cool but not necessary.

cloud sigil Jul 7, 2025, 6:19 AM

#

"Cool but not necessary" describes the majority of my HomeAssistant projects, so if nothing else, it's appropriate 😂

#[Solved] Section Layouts: Rows, Columns, & CardMod Question