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

slusar_o2 · April 13, 2021, 4:15am

I’m playing with grid mode and have question. How to set grid cointener in center position? Where should I place “justify-content: center”?
This is not working:

  - type: 'custom:grid-layout'
    layout:
      justify-content: center
      grid-template-columns: 300px 300px 40%
      grid-template-rows: auto
      grid-template-areas: |
        "header header2 header3"
    badges: []
    cards:
      - type: entities
        entities:
          - entity: light.shelly_shbduo_1_d166ad
        title: '1'
        show_header_toggle: false
        view_layout:
          grid-area: header
      - type: entities
        entities:
          - entity: light.shelly_shbduo_1_d166ad
        title: '2'
        show_header_toggle: false
        view_layout:
          grid-area: header2
      - type: entities
        entities:
          - entity: light.shelly_shbduo_1_d166ad
        title: '3'
        show_header_toggle: false
        view_layout:
          grid-area: header3

sergio_pt · April 13, 2021, 7:44am

I believe this is the option:


              place-items: start stretch

As an alternative, try to place columns with % on each side.

omayhemo · April 13, 2021, 5:29pm

Simplifying my previous post. As the instructions are, grid-view simply doesn’t work for me. What am I doing wrong?

  - panel: true
    layout:
      grid-template-columns: auto 30px 25%
      grid-template-rows: auto
      grid-template-areas: |
        "header header header"
        "main . sidebar"
      mediaquery:
        "(max-width: 600px)":
          grid-template-columns: 100%
          grid-template-areas: |
            "header"
            "sidebar"
            "main"
        "(max-width: 800px)":
          grid-template-columns: 50% 50%
          grid-template-areas: |
            "header sidebar"
            "main main"
    badges: []
    cards:
      - type: 'custom:layout-card'
        layout_type: grid
        layout: {}
        cards:
          - type: markdown
            content: >
              # Dummy 1
            view_layout:
              grid-area: header
          - type: markdown
            content: >
              # Dummy 2 
            view_layout:
              grid-area: main
          - type: markdown
            content: >
              # Dummy 3 
            view_layout:
              grid-area: sidebar
        view_layout: {}

Result:

UPDATE:
I found a nice workaround on the github, posted by Jpsy

CDRX2 · April 13, 2021, 8:49pm

Looks like you’re mixing the layout options at the view level an the layout-card. Try this:

  - panel: true
    layout:
      grid-template-columns: auto 30px 25%
      grid-template-rows: auto
      grid-template-areas: |
        "header header header"
        "main . sidebar"
      mediaquery:
        "(max-width: 600px)":
          grid-template-columns: 100%
          grid-template-areas: |
            "header"
            "sidebar"
            "main"
        "(max-width: 800px)":
          grid-template-columns: 50% 50%
          grid-template-areas: |
            "header sidebar"
            "main main"
    badges: []
    cards:
        - type: markdown
          content: >
            # Dummy 1
          view_layout:
            grid-area: header
        - type: markdown
          content: >
            # Dummy 2 
          view_layout:
            grid-area: main
        - type: markdown
          content: >
            # Dummy 3 
          view_layout:
            grid-area: sidebar

omayhemo · April 13, 2021, 9:26pm

Thanks ya, you’re right, typo in my repro of the issue.
But the real issue is that the UI layout_options seems to bugger up everytime you save, you have to use the layout: attribute as you have in your example with but with references to the layout_view, otherwise everytime you save at the UI it’ll remove everything. Seems like a bug.

LocoLoco · April 16, 2021, 6:38pm

Hi there, is there away to put a background color to a grid area?
I have tried this, but now result.

views:
  - title: testing
    panel: false
    path: testing
    type: 'custom:grid-layout'
    layout:
      grid-template-columns: 25% auto 25%
      grid-template-rows: null
      grid-template-areas: |
        "header header header"
        "sidebar main main"
        "footer footer footer"
      grid-area: sidebar;
      background-color: #ff0000
    badges: []
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: sensor.energy_production_tarif_1
        show_name: true
        show_icon: true
        show_state: true
title: homey

omayhemo · April 17, 2021, 12:21am

You can use card-mod found on HACS

LocoLoco · April 17, 2021, 6:06am

Card-mod is only for cards. I don’t want to change the color of the card, but the grid-area.

CDRX2 · April 17, 2021, 10:11am

Should work nonetheless if you include your grid card in a mod-card. See the card-mod docs, styling elements without ha-card.

omayhemo · April 17, 2021, 4:45pm

It works if you use the mod-card card per the documentation. You’ll need to apply a proper height, to get the mod-card to fill the background.

type: 'custom:mod-card'
card:
  type: 'custom:layout-card'
  layout_type: grid
  layout: {}
  cards:
    - type: entity
      entity: sensor.atrium_temperature_offset
    - type: entity
      entity: sensor.atrium_temperature_offset
  view_layout: {}
card_mod:
  style: |
    ha-card {
        background-color: yellow;
        height: 100%
    }

LocoLoco · April 18, 2021, 8:44am

Thank you, this is getting closer. But for now I don’t get a particular grid in a specific color. I have try several things but with now results.

What I want for example is:
grid-area: sidebar. >> background yellow
grid-area: header >> background green
grid-area: footer >> background blue

omayhemo · April 19, 2021, 1:49pm

Nope, I haven’t figured that one out yet. As far as I can tell, I haven’t been able to select the hui-entity-card by walking the DOM using a mod card. Just keep fiddling with it and looking at the inspector and seeing what you can find. However, if you set the background of all the cards in that grid-area, they should appear seamless

LocoLoco · April 19, 2021, 5:36pm

Ok. I will search further
Thans you for your time.

heartkingz · April 22, 2021, 5:49pm

Have you ever fixed this issue? I’m experiencing this as well when i cast to a Nest Hub…

Corey_Maxim · April 22, 2021, 10:44pm

No unfortunately, I gave up. I probably will eventually try it again as I can see many uses for this for sure! Good luck I hope you figure it out

hankanman · April 25, 2021, 6:30pm

Hi All,

Had fun pulling my hair out with this one, can anyone tell me how to remove the margin at #root > * for all child cards of layout card?

This is the property i want to negate:

CDRX2 · April 25, 2021, 6:52pm

You have to use custom:mod-card to get to this property.

hankanman · April 25, 2021, 6:52pm

Yeah been playing with that, but can’t figure out the right syntax to get there

CDRX2 · April 25, 2021, 7:15pm

This works for me:

 -  type: 'custom:mod-card'
    card_mod:
      style: 
        layout-card$: 
          grid-layout$: |
            :host {
              padding: 0px !important;
            }
            #root {
              margin: 0px !important;
            }
            #root > * {
              margin: 0px !important;
            }
    card:
      type: 'custom:layout-card'
      ...

Or you can try:

- type: 'custom:layout-card'
  style:
    '--masonry-view-card-margin': 0px

That might work as well.

hankanman · April 26, 2021, 8:27am

And suddenly the shadow roots make sense! thank you, been bugging me that one, okay one more, how can i get a layout card to fill all available vertical space?
Setting the #root of grid-layout to 100% doesn’t change anything, but setting a hard value (like 1000px) does, so i know its the one i want to change to fill the square grid it is part of (see parent grid highlighted in light green). I want to fill the remaining vertical space per the arrows