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

Thanks! I haven’t managed to get it to take up two rows yet, but atleast it is now centered in the middle.

I think it is specific of the card - its proportion, Layout card cannot force height of the card to be stretched. But I believe that for custom button car you can specify card proportions or size expplicitly. For size lets try:

type: 'custom:button-card'
entity: light.test_light
color_type: card
color: auto
name: 80px
styles:
  card:
    - height: 80px
    - width: 30px`

For aspect:

type: custom:button-card
name: 2/1
icon: mdi:lightbulb
aspect_ratio: 2/1

more to be found here.

Thanks @mirekmal,

The top example with height is working for me (for some reason I’d never tried card-mod styles on the buttoncard itself). Fixing height seems to break the auto-sizing (suddenly my icons are weird etc) but with some trial and error I’ll be able to do what I want.

Aspect ratio isn’t working for me, I think it doesn’t like this being used in conjunction with the grid-area options.

so where is your - grid-template-columns: and - grid-template-rows: ?
Also, it would be easier to understand if you showed your cards view_layout as well

They arent there because no matter what I added for columns or rows nothing worked so I put the minimum information required to reproduce (as everyone keeps telling me to do).

ok, true in many cases , to narrow down the scope , and figure out where something is wrong
, but when defining a grid ( With row-span ! ( or column-span ), as you want ) … then columns and rows need to be define
columns and rows is what makes a grid !

Ordinarily I use those (and don’t use grid area) but with grid-area they are less critical.

If I wanted non-standard column width then I’d have needed to use columns with relevant % widths but since it was just 25% for each then it already gets this from my 4 grid areas.

I then tried messing with rows (since I thought that would do what I needed) but in practice this just affected the size of each row, not the placement of the cards (i.e. it could make the row double height but the cards themselves were still only single-height)

use

      grid-template-columns: 25% repeat(4)
      grid-template-rows: auto
      grid-template-areas: |
        "boot carrl carfl hood"
        "boot carrr carfr hood"

PS: Don’t forget the

        view_layout:
          grid-area: boot

this defines in which area a specific card is placed, and have to be “attached” to every “bottom-card” , whether it’s a single button-card(bottom-card), or a stack of cards in vertical/horizontal stack(bottom-card)

And as Mirek said above, the card specifics ( which you also haven’t showed ), try 1/2 , who knows

Get use to post everything which are relevant to your problems, meaning the whole grid definition and atleast the first card here ( which you want to fill 2 rows )

So I’ve landed on the below, using the card height (place-self: center stretch actually not required if the height is full). Now I need to head over to the button-card page to work out why my buttons are inaccurately representing state :slight_smile:
image

type: custom:stack-in-card
mode: horizontal
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-areas: |
        "boot carrl carfl hood"
        "boot carrr carfr hood"
    cards:
      - type: custom:button-card
        entity: sensor.edy87b_lock
        show_state: true
        show_name: false
        icon: mdi:car-back
        styles:
          card:
            - height: 160px
            - width: 100px
        state_display: '[[[ return entity.attributes.decklidstatus ]]]'
        view_layout:
          grid-area: boot
      - type: custom:button-card
        entity: sensor.edy87b_lock
        label: Front Left
        show_state: true
        show_name: false
        state_display: '[[[ return entity.attributes.doorstatusfrontleft ]]]'
        view_layout:
          grid-area: carfl
      - type: custom:button-card
        entity: sensor.edy87b_lock
        label: Front Left
        show_state: true
        show_name: false
        state_display: '[[[ return entity.attributes.doorstatusfrontright ]]]'
        view_layout:
          grid-area: carfr
      - type: custom:button-card
        entity: sensor.edy87b_lock
        label: Front Left
        show_state: true
        show_name: false
        state_display: '[[[ return entity.attributes.doorstatusrearleft ]]]'
        view_layout:
          grid-area: carrl
      - type: custom:button-card
        entity: sensor.edy87b_lock
        label: Front Left
        show_state: true
        show_name: false
        state_display: '[[[ return entity.attributes.doorstatusrearright ]]]'
        view_layout:
          grid-area: carrr
      - type: custom:button-card
        entity: sensor.edy87b_lock
        label: Front Left
        show_state: true
        show_name: false
        icon: mdi:car-cog
        styles:
          card:
            - height: 160px
            - width: 100px
        state_display: '[[[ return entity.attributes.doorstatusfrontleft ]]]'
        view_layout:
          grid-area: hood
          place-self: center stretch

1 Like

Hello please help me i want to do this
1
but this is problem. how i do this.

I specifically told you to try and solve this yourself with the layout card when you first posted it in the mushroom thread.

You need to be willing to put in minimal effort yourself before people will help you.

So give it a go to try and solve it yourself by reading posts in this thread. Then if you get severely stuck somewhere post the code that have got to here.

3 Likes

You make 1 small column, and 3 wide columns

Edit: Here is a simple layout (example)
a637b390841fd2f13d9b4fccf67b6a7d9c711354

Here you have to use i.e “justify” and a good advice is, use % for the cell content & columns to adapt to smaller ViewPorts

1 Like

I am using layout-card with a grid layout to display 3 button cards along a top row, and 6 thermostat cards - 3 per row across 2 rows, like this:

When viewing on my tablet, there is a fair bit of vertical scrolling in order to view the bottom row of cards fully. It doesn’t look like a huge amount in the above picture, but the scrolling seems to be caused due to the amount of padding around each of the 6 thermostat cards. I’ve left the thermostat card borders visible to help show this.

This is being displayed within a browser mod popup window, in fullscreen mode, using the following code:

action: fire-dom-event
browser_mod:
  service: browser_mod.popup
  data:
    title: Heating
    #timeout: 60000
    size: fullscreen
    content:
      type: custom:layout-card
      layout_type: custom:grid-layout
      layout:
        margin: 0
        grid-template-columns: auto
        grid-template-rows: 10% auto auto
        grid-template-areas: |
          "controls   controls  controls"
          "lounge   kitchen   hall"
          "spare    office    main"
        mediaquery:
          #phone
          "(max-width: 800px)":
            grid-template-columns: 1fr 1fr
            grid-template-rows: auto
            grid-template-areas: |
              "controls controls"
              "lounge kitchen"
              "hall   office"
              "spare main"
      cards.....:

How can I reduce this padding or gap between each of the 6 thermostat card borders, and the grid area that it sits within?

I’m having an issue with padding being on my layout-card even though I have specified 0. Basically I have a main layout card dividing my space into an upper and lower, then another inside of each of those space dividing it further… I have all the margins to 0 and padding to 0, but I am still getting padding.

Here is some example code. The padding is, for example, on the buttons on the “right”. When I look with development tools I am seeing

#root > * {
   margin: var(--masonry-view-card-margin, 4px 4px 8px)
}

On the “” itself. If I manually set those to 0 its all fixed. But why are they even there? How can I fix it either with the layout card or card-mod? Thanks.

  - title: Overview
    path: overview
    type: custom:layout-card
    layout_type: grid
    layout:
      grid-template-columns: 50vw 50vw
      grid-template-rows: min-content minmax(0, 1fr)
      grid-template-areas: |
        "header-buttons header-buttons"
        "main-left main-right"
      height: calc(100vh - 60px)
      margin: 0px 0px 0px 0px !important
      card_margin: 0px 0px 0px 0px !important
      padding: 0px 0px 0px 0px !important
    cards:
      ##########################################################################
      ##
      ## Chips
      ##
      ##########################################################################
      - type: custom:layout-card
        layout_type: custom:grid-layout
        view_layout:
          grid-area: header-buttons
        layout:
          grid-template-columns: auto
          grid-template-rows: auto
          height: 100%
          place-content: end center
          margin: 0px 0px 0px 0px !important
          card_margin: 0px 0px 0px 0px !important
          padding: 0px 0px 0px 0px !important
        cards:
          - type: horizontal-stack
            cards:
              - type: "custom:button-card"
                template: chip_icon_label
                label: Label
                icon: "mdi:heart"
              - type: "custom:button-card"
                template: chip_icon_label
                label: Label
                icon: "mdi:heart"
              - type: "custom:button-card"
                template: chip_icon_label
                label: Label
                icon: "mdi:heart"
              - type: "custom:button-card"
                template: chip_icon_label
                label: Label
                icon: "mdi:heart"
              - type: "custom:button-card"
                template: chip_icon_label
                label: Label
                icon: "mdi:heart"

      ##########################################################################
      ##
      ## Left
      ##
      ##########################################################################
      - type: custom:layout-card
        layout_type: custom:grid-layout
        view_layout:
          grid-area: main-left
        layout:
          grid-template-columns: auto
          grid-template-rows: min-content minmax(0, 1fr)
          height: 100%
          margin: 0px 0px 0px 0px !important
          card_margin: 0px 0px 0px 0px !important
          padding: 0px 0px 0px 0px !important
        cards:
          - type: custom:clock-weather-card
            entity: weather.accuweather_accuweather
            title: Home
            sun_entity: sun.sun
          - type: "custom:atomic-calendar-revive"
            card_mod:
              style: |
                .cal-card {
                  overflow: hidden !important;
                }
            entities:
              - entity: calendar.e
                name: "e"

      ##########################################################################
      ##
      ## Right
      ##
      ##########################################################################
      - type: custom:layout-card
        layout_type: custom:grid-layout
        view_layout:
          grid-area: main-right
        card_mod:
          style: |
            --masonry-view-card-margin: 0px
        layout:
          grid-template-columns: 50% 50%
          grid-template-rows: auto
          height: 100%
          margin: 0px 0px 0px 0px !important
          card_margin: 0px 0px 0px 0px !important
          padding: 0px 0px 0px 0px !important
        cards:
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps
          - type: "custom:button-card"
            template:
              - emf_room_card
            name: Family Room
            icon: mdi:sofa-outline
            entity: switch.zb_family_room_lamps

place this in your theme, should do the trick.

Because the author/creator thought so, people/devs are creative people with different perspectives and minds, just like you and me things different ( beside in this case :slight_smile: , i also prefer no margins or padding, unless im stated so my self.
4 4 8 seems to some kind of standard, which came to the “draw-board” some generations back, and now some are just using this (just because) for no particular reason

Any way to do it without modifying the theme? Like with card mod?

It’s causing this misalignment at the bottom between the left and right.
Screenshot 2024-02-08 at 4.33.08 PM

if you have card_mod questions, ask in the huge Card_Mod Topic, it’s there for the same reason

Looking for something else but really like your ‘person’ cards, how did you do these?

Using these settings to get one big card. Works fine on computer screens and tablets but not on mobile phones. It isn’t even to possible to scroll horizontal direction. How can this be resolved?

image

Maybe using grid-layout

the width you use there ( in the View ) is in px

in grid you can use 1 column 100% ( will fill any screen )

views:
  - title: Home
    type: custom:grid-layout
    layout:
      grid-template-columns: 100%
      grid-template-rows: xx