2/3 plus 1/3 horizontal layout using layout-card

Configuration Frontend
1

Can anyone drop below working yaml for the awesome layout-card that can show two other cards, one limited to 2/3 of the available width and a second to the right of it limited to 1/3?

I have it working to show 2 columns, but I can’t get specific width % to work.

1 Like
2

something like:


type: custom:grid-layout
layout:
  grid-template-columns: 1fr 2fr
  grid-template-rows: auto
  grid-template-areas: |
    "left right" 

cards:
  - type: vertical-stack
    view_layout:
      grid-area: left
    cards:
    ...

  - type: vertical-stack
    view_layout:
      grid-area: right
    cards:
   ...

the 1fr 2fr means a 1:2 ratio between the columns.
You can name your columns anything you like - I have used left an d right in this example.

3

Thanks, unfortunately I get nothing shown (no errors either, though) with this:

type: custom:grid-layout
layout:
  grid-template-columns: 1fr 2fr
  grid-template-rows: auto
  grid-template-areas: |
    "left right" 

cards:
  - type: vertical-stack
    view_layout:
      grid-area: left
    cards:
      - type: markdown
        content: Left Test

  - type: vertical-stack
    view_layout:
      grid-area: right
    cards:
      - type: markdown
        content: Right Test
5

Hmm, it’s should work. My Mac is installing an update right now so cannot double check it,

I’ll try in an hour.

Edit: quick question, exactly where are you pasting this? Are you using the UI and pasting there? …the version I gave you is for the whole page, not an individual card within a page.

6

Thanks again, that may explain why I wasn’t seeing anything then, as I had put this in a manual card.

As I need these two cards to sit in a conditional card eventually.

7

OK, so try this (note the difference in type and the addition of layout_type)

- type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    grid-template-columns: 1fr 2fr
    grid-template-rows: auto
    grid-template-areas: |
      "left right" 
  cards:
    - type: vertical-stack
      view_layout:
        grid-area: left
      cards:
        - type: markdown
          content: Left Test

    - type: vertical-stack
      view_layout:
        grid-area: right
      cards:
        - type: markdown
          content: Right Test
1 Like
8

Brilliant, that’s working perfectly. Many thanks again, appreciate the quick help.

9

No worries! :+1:

Please consider marking my post with the solution tag. This places a check-mark next it which lets others know that this topic has been resolved and helps others find answers to similar questions.