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

[weemaba999 (Bart Weemaels)]

HI all,

Is there a possibility to ‘stretch’ or ‘reduce’ cards so that they fit in the grid area’s and are aligned with each other ?

I’m having following issue:

The two flow cards (Power Flow Now / Energy Flows (today)) are not aligned with the apexcharts-card.

I’m using following grid configuration:

layout:
      grid-template-columns: 0em 74px 25% 42% 25% auto
      grid-template-rows: grid-title-row-height auto auto
      grid-gap: 0.1em
      grid-template-areas: |
        ". . title title title ."
        ". nav line1 line1 line1 ."
        ". nav line2 line2 line2 ."

Where the two flow charts are in a horizontal-stack and the 3 gauges and apex are in a vertical-stack WITHIN that horizontal-stack

Can anyone point me in the right direction please ?

Thanks a lot in advance !

Kr,

Bart

[louski]

Hello @liminal,

please excuse my cheeky question, but what are you using for cards here? Could you perhaps provide the yaml code? Thank you, looks very nice

[boheme61]

have you tried with “margin-bottom Or margin-top” on the Flow-cards ?

Also , it’s kind of “hard to imagine” why your columns-setup & your -areas looks as i does, when you only post the layout

[dtapro (Anh)]

Can anyone help me arrange the entities as shown below, thanks
row 1: 3 column
row 2: 2 column

[boheme61]

@boheme61

And how does your “grid-layout”-card-code looks like ? “formatted”

My question is still “Valid” … that is if you haven’t already figured it out, by reading some of the 730 post in here

[dtapro (Anh)]

@boheme61

@boheme61

like ? “formatted”

My question is still “Valid” … that is if you haven’t already figured it out, by reading some of the 730 post in here

I tried and followed the instructions here

[fredrikpersson92 (Fredrik Persson)]

grid-template-columns: repeat(3, 1fr)
grid-template-rows: 1fr 1fr
grid-template-areas: |
  "a b c"
  "d d e"
```

[statzern (Nicholas)]

I am trying to have a certain card disappear on screens under 800px, but while it resizes the cards and columns, hiding a card actually pushes it off the screen but it still remains visible. See gif for example:

GIF

At the top of the yaml, I have this:

type: custom:grid-layout
layout:
  grid-template-columns: 33%
  grid-template-rows: auto
  grid-template-areas: |
    "weather favorites person"
  mediaquery:
     "(max-width: 800px)":
      grid-template-columns: 100%
      grid-template-areas: |
        "favorites"
        "person"

And the card I am trying to have disappear on smaller screens is:

  - type: custom:clock-weather-card
    entity: weather.forecast_1833_green_hills_dr
    view_layout:
      grid-area: weather
      mediaquery:
        show: "(min-width: 800px)"   

Any ideas? Thanks!

[VietNgoc (Ngoc John)]

- type: custom:clock-weather-card
  entity: weather.forecast_1833_green_hills_dr
  view_layout:
    grid-area: weather
    show:
      mediaquery: "(min-width: 800px)"

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

[boheme61]

Even works hiding whole type: vertical-stacks !

PS: However, if OP’s resolution is “uncertain” , then use a larger “min” number(in view-layout grid-area), than Max-width in top layout: mediaquery

[danema (David)]

Love layout-card, however I face the following challenge:
I’d like to show all lights that are currently on in a certain area, and only show two cards per row on mobile and 5 cards per row on wider screens so, I figured horizontal stack would make sense.

However currently it looks like this:

Does anyone know how I can make sure if 1 light is one it shows 50% and if 3 lights are on the first two show on the 1st row and the 3rd on the second row?
Of coutype or paste code hererse on larger screens they can all 3 be displayed on the 1st row.

This is my code:

type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
  grid-template-rows: "min-content"
  grid-template-columns: "20% 20% 20% 20% 20%"
  grid-template-areas: |
    "title title title title title"
    "keuken1 keuken1 keuken1 keuken1 keuken1"
    
  mediaquery:
    # Mobile
    "(max-width: 393px)":
      grid-template-columns: "1fr 1fr"
      grid-template-areas: |
        "title title"
        "keuken1 keuken1"
    "(max-width: 852px)":
      grid-template-areas: |
        "title title title title title"
        "keuken1 keuken1 keuken1 keuken1 keuken1"

view_layout:
  grid-area: "lights"
cards:
  - view_layout:
      grid-area: "title"
    type: conditional
    conditions:
      - condition: "numeric_state"
        entity: sensor.lights_on_in_the_kitchen
        above: 0

    card:
      type: "custom:button-card"
      template: "card_title"
      name: "Keuken"

  - view_layout:
      grid-area: "keuken1"
    type: horizontal-stack
    cards:          
      - type: conditional
        conditions:
          - condition: state
            entity: light.keukenblok
            state: "on"
        card:
          type: "custom:button-card"
          template: card_light
          entity: light.keukenblok
          variables:
            ulm_card_light_icon: "mdi:lightbulb-fluorescent-tube"
            ulm_card_light_enable_slider: true
            ulm_card_light_enable_color: true
            ulm_card_light_force_background_color: true

      - type: conditional
        conditions:
          - condition: state
            entity: light.ledstrip_keukenblok_boven_2
            state: "on"
        card:
          type: "custom:button-card"
          template: card_light
          entity: light.ledstrip_keukenblok_boven_2
        variables:
          ulm_card_light_icon: "mdi:led-strip-variant"
          ulm_card_light_enable_slider: true
          ulm_card_light_enable_color: true
          ulm_card_light_force_background_color: true

      - type: conditional
        conditions:
          - condition: state
            entity: light.keukentafel
            state: "on"
        card:
          type: "custom:button-card"
          template: card_light
          entity: light.keukentafel
        variables:
          ulm_card_light_icon: "mdi:ceiling-light-multiple"
          ulm_card_light_enable_slider: true
          ulm_card_light_enable_color: true
          ulm_card_light_force_background_color: true

[boheme61]

Try to use min-width on the button-cards, as you have it in a conditional-card, it will always “fill”, as much as it can in row-width … it’s the conditional-card which you have place in “grid-area” not the individual button-cards

[Roxy]

Evening, not sure if I’m too tired or frustrated.
With this basic layout, grid with a vertical stack in each column, is there a way to remove/reduce the gap between the columns?
I have tried most of the style css I found in this forum, no luck

views:
  - title: Home
    type: custom:grid-layout
    badges: []
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-gap: 0px 0px
          grid-template-columns: 25% 50% 25%
          grid-template-areas: |
            “left center right”
        cards:
          - type: custom:layout-card
            layout_type: custom:vertical-layout
            layout: {}
            style: ''
            cards:
              - type: light
                entity: light.wifi_dimmer_light
              - type: light
                entity: light.charlotte_main
          - type: custom:layout-card
            layout_type: custom:vertical-layout
            layout: {}
            cards:
              - type: light
                entity: light.wifi_dimmer_light
          - type: custom:layout-card
            layout_type: custom:vertical-layout
            layout: {}
            cards:
              - type: light
                entity: light.wifi_dimmer_light

Many thanks

[boheme61]

@Roxy

remove/reduce the gap between the columns?

It’s not a gap in the columns, your center-card is just not “wide” enough to fill it’s column

Try to make 4 column 25% each
grid areas:
" left center center right "

Just a wild shot, in the dark night, but you have to “Stretch” your “center” card

PS: Beside you haven’t Defined any

        view_layout:
          grid-area:

Should state which card/vertical-stack / in which grid-area … now they are just thrown in and you might get an undesired “reordering” when viewing in lower resolution ( Loosing the point with grid-area ! )

Actually you also want the first vertical-stack to “fill” 2 rows ( as you have stacked 2 cards in there, which makes row 1 , 2 cards high ! … which you eventually will find out/see (Just try to ad another card/vertical-layout , and see where it ends up)

left1 center1 center1 right1
left1 center2 center2 rightX

[danema (David)]

Thanks @boheme61,

This eventually did the job:

view_layout:
  grid-area: "lights"
cards:
  - view_layout:
      grid-area: "keukenh"
    type: conditional
    conditions:
      - condition: "numeric_state"
        entity: sensor.lights_on_in_the_kitchen
        above: 0

    card:
      type: "custom:button-card"
      template: "card_title"
      name: "Keuken"

  - view_layout:
      grid-area: "keuken1"
    type: "custom:mod-card"
    style:
      hui-horizontal-stack-card$: |
        #root {
          flex-wrap: wrap;
        }
        #root > hui-conditional-card {
          min-width: 174px;
          max-width: 174px;
          padding-block-end: 12px;
        }
    card:
      type: horizontal-stack
      cards:          
        - type: conditional
          conditions:
            - condition: state
              entity: light.keukenblok
              state: "on"
          card:
            type: "custom:button-card"
            template: card_light
            entity: light.keukenblok
            variables:
              ulm_card_light_icon: "mdi:lightbulb-fluorescent-tube"
              ulm_card_light_enable_color: true
              ulm_card_light_force_background_color: true
        …

[domain_int]

Hi layout-card gurus

How do I I get these columns to justify into the center of the screen? So far everything justifies left. Do I really have to calculate 100% and then put in gap cards either side for padding???

type: custom:layout-card
layout_type: grid
layout_options:
  grid-template-columns: 3% 12% 12% 12% 12% 12% 3%
  grid-template-rows: auto
  grid-gap: 0px 0px
cards:...

[Simob_98]

Hi all,

I have the same problem of @domain_int .
Now it’s been about three days and can’t figure out why everything justified on the left instead of center.
Following my code:

type: custom:layout-card
layout_type: grid
layout_options:
  grid-template-columns: 500px 500px
  grid-template-rows: auto
  justify-content: center
  grid-template-areas: |
    "risorse storage"
    "informazioni informazioni"
    "pulsanti pulsanti"
  mediaquery:
    "(max-width: 650px)":
      grid-template-columns: 100%
      grid-template-areas: |
        "risorse"
        "storage"
        "informazioni"
        "pulsanti"
cards: ...

I also tried using “place-items” and allign-items", without success.

Thanks in advance

[sebbaT]

easiest way is to define columns either side of your content. Then you can define these as a % or ‘auto’.

Look at the below:

grid-template-columns: auto 500px 500px auto
grid-template-rows: auto
grid-template-areas: |
  ". risorse storage ."
  ". informazioni informazioni ."
  ". pulsanti pulsanti ."
mediaquery:
  "(max-width: 650px)":
    grid-template-columns: 100%
    grid-template-areas: |
      "risorse"
      "storage"
      "informazioni"
      "pulsanti"

[Simob_98]

Hi,

Thanks for the advise.
Unfortunately, ad you can see it’s not working using 2 empty columns:

Also tries using percentage:

grid-template-columns: 35% 15% 15% 35%
grid-template-rows: auto
grid-template-areas: |
  ". risorse storage ."
  ". informazioni informazioni ."
  ". pulsanti pulsanti ."
mediaquery:
  "(max-width: 650px)":
    grid-template-columns: 100%
    grid-template-areas: |
      "risorse"
      "storage"
      "informazioni"
      "pulsanti"

So the “justify” option doesn’t work?

Thanks

[sebbaT]

are you adding the view_layout on each card to tell it which grid cell to be within?

for e.g on your resources grid cards:

view_layout:
  grid-area: risorse