[Solved] 2/3rds tile+button layout

[MaxVonEvil (Max)]

Hi all, I’m trying to organize my dash panels a little nicer using grids, horizontal + vertical stacks and what not.

Using the new tile support for fans, I’d have the fan tile use two-thirds of the horizontal space and the last third of the space by a Light tile as they both look better with that kind of allotted screen real-estate, but I’m running up against a problem here:

TLDR; I can do this with a horizontal stack or two column grid:

…or this with a 3 column grid:

But how would I do this: (pardon the crappy 10 second mspaint mockup)

I cannot rule out the solve might be laughing right in my face, nor am I against HACS special cards if there is such, yet I’ve not found one as of yet. Any suggestions are welcome.

[Stiltjack]

Tricky one… This is as near as I can get with a horizontal stack of two grids:

My wall tablets use a theme which hides the card outlines, so it doesn’t look too bad:

Have you got something which you could put in the empty card?

[MaxVonEvil (Max)]

Hi Jack, thanks for the suggestion - unfortunately my usecase may differ somewhat from your thermometers.

The fan-tile buttons becomes too small for tablet use (or my fat fingers, take your pick) when using just half of the card width. The Light card with the dimmer control arch also becomes hard to use as the movable dot is hard to catch if the card scaled down to a quarter. Being able to do thirds somehow would kill both birds with one stone here.

[Ildar_Gabdullin]

Kind of:

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card$: |
      hui-entity-card:nth-of-type(1) {
        flex-grow: 2 !important; 
      }
      hui-entity-card:nth-of-type(2) {
        flex-grow: 1 !important; 
      }
card:
  type: horizontal-stack
  cards:
    - type: entity
      entity: sun.sun
    - type: entity
      entity: sun.sun

[MaxVonEvil (Max)]

Ah, card-mod to the rescue!
I just recently began mucking about with this HACS extension, albeit my CSS kung-fu is not quite strong. I’ll defiantly give this a whirl and see if it fits the bill, but it looks promising. Thanks for sharing!

[boheme61]

You could also “set” FanLight to match the aspect ratio for the card, and set the first column as auto
With:

type: custom:grid-layout
    height: auto
    padding: 0
    layout:
      grid-template-columns: auto(first column) 25% "or 120px"(second column)
      grid-template-rows: auto
      grid-template-areas: |
        "tiles light"

grid-template-columns - CSS: Cascading Style Sheets | MDN

GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the...

PS: Thou as you don’t show your code, noone knows what you use, what you’ve done ) beside taken a screenshot

[MaxVonEvil (Max)]

@boheme61 thanks for the suggestions, however your last comment suggests some level of irritation that I did not ‘show my code’ Truth is there is no custom code to show as I didn’t do any. Those first two examples were just made using the standard cards and that last was a mockup - lovingly made in glorious technicolored mspaint

[Ildar_Gabdullin]

@MaxVonEvil

lovingly made in glorious technicolored mspaint

The best way to demonstrate a desired design (btw many people here prefer to describe it by plenty of words - which may be unproductive).

[boheme61]

No “irritation” here, i don’t care whether you want help or not, just showing that you can accomplice what you want, so basically your question is answered in several answers(3). ( And there are also few other ways ) , im sure you would even find a complete solution/code( which match your usecase ), if you use the search function
How does i.e 3/4 or 3/5 look in your Devices, or 5/8 for that matter , span-options are endless.
And with “mediaquery:” you can even decide how it should look/behave in various screen-resolutions.

[MaxVonEvil (Max)]

@Ildar_Gabdullin

[mspaint is] The best way to demonstrate a desired design (btw many people here prefer to describe it by plenty of words - which may be unproductive).

Could not agree more, there’s a reason why we say ‘a picture is worth a thousand words’, not the other way around. Some just get overly miffed over nothing, lol - BTW, your mod-card code above worked like a charm, thanks again!

[vaderag]

I’ve just tried this exact code but it’s not actually working

If I break it by chosing a non existant entity it works tho:

Has something changed since this was posted or have I done something wrong?!

[Ildar_Gabdullin]

Structure was changed a few months ago.
Use this:

card_mod:
  style:
    hui-horizontal-stack-card $: |
      hui-card:nth-of-type(1) > * {
        flex-grow: 2 !important; 
      }
      hui-card:nth-of-type(2) > * {
        flex-grow: 1 !important; 
      }