šŸ”¹ Layout-card - Take control of where your cards end up

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

2 Likes

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

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

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

95f32c981c5cbd16c38e2f5d6975be8aff1e53b3

1 Like

My question is still ā€œValidā€ :wink: ā€¦ that is if you havenā€™t already figured it out, by reading some of the 730 post in here :wink:

I tried and followed the instructions here

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

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!

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

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

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

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

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 :frowning:

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

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

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
        ā€¦

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:...

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

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"

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

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