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

[CDRX2]

You’ll have to play with the button-card styles to bypass its aspect ratio.

[Montreal666]

Seeking help from layout-card experts =)
I did some searching in this thread but couldn’t find the solution I’m looking for.
I’m about to dig deeper in the css grid options but want to make sure I’m not overengineering this…

I’d like my layout to behave like
“custom:vertical-layout”
max_cols: 3
width: 400

but once cards reach the bottom of the screen, automatically move to the next column
and overflow at the bottom of the last column if needed.

I can do this by manually adding custom:layout-break at the bottom of each column but in order to correctly manage screen estate, I want the layout break to happen automatically based on screen size. Examples:

Large tablet

Small tablet

Cell phone

Thanks for your help!

[CDRX2]

Haven’t played with layout card for some time, but what you’re looking for is called mediaqueries. Check for it in the layout card documentation.

[Montreal666]

Thanks for the pointer,
I made some progress (below)
I defined the vertical height of the viewport to ensure columns are finite.
everything works and makes sense but the cards flow horizontally so I need to find a way to specify “flex-direction: column” or something equivalent.
Newbie coder so pretty sure my flex part is in the wrong spot or just plain incorrect so feel free to jump in.

thx

    type: custom:grid-layout
    layout:
      grid-template-rows: auto
      height: 90vh
      display: flex
      flex-direction: column
      mediaquery:
        "(max-width: 900px)":
          grid-template-columns: 100%
        "(max-width: 1300px)":
          grid-template-columns: 50% 50%
        "(max-width: 3000px)":
          grid-template-columns: 33% 33% 1fr

[Montreal666]

found the equivalent of flex-direction for grid-layout:
“grid-auto-flow”, there’s a nice writeup here:

grid-auto-flow : CSS Grid :: flex-direction : Flexbox | CSS-Tricks

but best I could do is below.
Guess I’m stuck with the obvious definition of a “grid” where it ends up aligning all items to same height on each column… would need each item in each column be directly underneath each other, and not lined up…
which seems to bring me back to the “vertical-layout option”…
would just need to figure out a way to apply custom:layout-break based on viewport height.

open to any suggestions, thx!

height: calc(100vh - var(--header-height))
grid-auto-flow: column dense
grid-template-columns: auto
grid-template-rows: repeat(6,1fr)
mediaquery:
  "(max-width: 500px)":
    grid-template-columns: 100%
    grid-template-rows: repeat(20,1fr)
  "(max-width: 900px)":
    grid-template-columns: 50% 50%
    grid-template-rows: repeat(5,1fr)
  "(max-width: 1300px)":
    grid-template-columns: 33% 33% 34%
    grid-template-rows: repeat(6,1fr)

[renespit]

I had the same annoying 4px margin issues. I have solved it by copying (directory: config/lovelace/www/community/lovelace-layout-card) layout-card.js to layout-card_rs.js.
Then edit layout-card_rs.js with an editor (File editor). Change ‘4px’ or ‘8px’ in every line with the word ‘margin’ to ‘0px’.
After that edit the file (directory: config/) and change the line ‘- url: /hacsfiles/lovelace-layout-card/layout-card.js’ in ‘- url: /hacsfiles/lovelace-layout-card/layout-card_rs.js’.
Now you got rid of the annoying 4px margins and it wil not be updated anymore.

[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