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

[KameDomotics]

Hi, I’m trying to create a card with entities on the left and an icon on the right (cropped, I like it that way).
I’m not sure I’ve done it in the best way, for example I would like to increase the width of the left column to have only one line for each entity (now it wraps).

This is the graphic result:

Could you give me some advice?
Thanks

square: false
type: grid
cards:
  - type: custom:stack-in-card
    cards:
      - type: markdown
        content: >-
          <center><strong><font size="3"><font
          color=white>FRIGORIFERO</font></font></center>
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 23% 140%
        cards:
          - type: vertical-stack
            cards:
              - type: custom:mushroom-chips-card
                chips:
                  - type: spacer
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.ble_temp_freezer
                    icon_color: blue
                    icon: mdi:snowflake-thermometer
              - type: custom:mushroom-chips-card
                chips:
                  - type: spacer
              - type: custom:mushroom-chips-card
                chips:
                  - type: entity
                    entity: sensor.ble_temp_frigo
                    icon_color: blue
                    icon: mdi:snowflake-thermometer
          - type: button
            tap_action:
              action: none
            entity: sensor.ble_temp_frigo
            icon_height: 100%
            show_name: false
            icon: mdi:fridge
            style: |
              ha-card {
               background-color: transparent;
               box-shadow: none;
               }       
              :host {
                --paper-item-icon-color: grey
columns: 2

[girkers]

This is the first time I have used this and it is exactly what I was after.

I am using it for a card only to allow me to have two other cards side by side and it works a treat. The only issue I have is that one of the cards is not being centred vertically.

As you can see the right hand card is not centring. Can anyone suggest how I go about making the right card sit beautifully in the middle of the card.

Thanks

[Montreal666]

Sorry to dig up an old post but this doesn’t seem to work with custom:button-cards within a layout card.
Or should it? see a simple test code below;

Card in area “A1” has its height manually adjusted.
the remaining cards won’t adjust to 100% height.

Let me know if this is a custom:button-card issue/standard behavior or if there is something wrong with my code.

type: custom:mod-card
card_mod:
  style:
    layout-card$:
      grid-layout$: |
        :host {
          padding: 0rem !important;
        }
        #root {
          margin: 0rem !important;
          height: 100% !important;
        }
        #root > * {
          margin: 0.2rem !important;
        }
    .: |
      ha-card  {
        border: solid 0.1rem blue !important;
        height: 100% !important;
        }        
card:
  type: custom:layout-card
  layout_type: grid
  layout:
    grid-template-columns: 30% 30% 1fr
    grid-template-rows: 30% 1fr
    grid-template-areas: |
      "A1 A2 A3"
      "A1 A2 B3"
  cards:
    - type: custom:button-card
      view_layout:
        grid-area: A1
      styles:
        card:
          - height: 10.2rem
      entity: switch.wallswitch50
    - type: custom:button-card
      view_layout:
        grid-area: A2
      entity: switch.wallswitch50
    - type: horizontal-stack
      view_layout:
        grid-area: A3
      cards:
        - type: custom:button-card
          icon: mdi:volume-minus
        - type: custom:button-card
          icon: mdi:volume-minus
        - type: custom:button-card
          icon: mdi:volume-minus
    - type: horizontal-stack
      view_layout:
        grid-area: B3
      cards:
        - type: custom:button-card
          icon: mdi:volume-minus
        - type: custom:button-card
          icon: mdi:volume-minus
        - type: custom:button-card
          icon: mdi:volume-minus

Edit:

Answer is to add

        styles:
          card:
            - height: 100%

to each button card or via a template.

BTW thank you for the other part related to padding/margins as this works perfectly.

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

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 m…

[CDRX2]

I think you’ll need to mess with the button-card itself, as far as I remember, it has a default aspect ratio set that will result in the behaviour you’re seeing.

[Dibbler (Thomas Bail)]

Layout Card vs Grid card - I tried to replace my grid cards with layout card. Doing this i recognized that with the layout card compared to the grid card i have an small frame in the layout card

Layout Card

Grid Card

Question is now how could i get rid of this small frame. Compared with other cards the layout card has always this frame which makes them looking smaller compred to other card - This drives me mad.

As layout option i use:

grid-template-columns: 1fr 1fr
grid-template-rows: auto
margin: 0px
padding: 0px

Any one any idea i could try?

[Montreal666]

Check my post just above. You can manage all margins by embedding your layout-card In a custom.mod-card. this part is the one you need to play with:

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

[Montreal666]

Thanks, will check it out. Wondering how I can bypass the default aspect ratio and force height: 100% as I already tried " !important;"
Fingers crossed. Thx

[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"
```