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

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.

4 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

Hopefully someone can help me make sense of this. I have a layout with header, (potential) subheader, main, and some footer cards. While header and footer will adapt to screensize/width, my main area for some reason seems to want to align only with the box shown in the screenshot. Not sure what I am missing here, can anyone point me in the right direction with this code:

title: home
path: home
icon: mdi:home
theme: ios-dark-mode-blue-red
background: "var(--background-image)"
type: custom:grid-layout
layout:
  margin: -0.5vh 1vh 0vh
  card_margin: 0px 0px 0px 0px
  grid-template-columns: auto
  grid-template-rows: 17vh 2vh 61vh 2vh 9vh 9vh
  grid-template-areas: |
    "header"
    "subheader"
    "main"
    "footer_title"
    "footer"
    "menu"
cards:
  - type: custom:button-card # HEADER
    view_layout:
      grid-area: header
    template: header
    variables:
      view: home
  - type: custom:layout-card # MAIN
    view_layout:
      grid-area: main
    layout_type: custom:vertical-layout
    layout:
      height: 61vh
      margin: 0vh 0vh 0vh 0vh
      padding: 0vh 0.4vh
    cards:
#################MAIN AREA######################################
      - type: vertical-stack
        cards:
        - type: custom:button-card
          template: room_card
          variables:
            room_card_name: Schlafzimmer
            room_card_icon: mdi:bed-king-outline
            room_card_temp: sensor.bedroom_echo_temperature
            entity_1: light.bedroom
            entity_1_icon: mdi:bed-outline
            entity_2: light.desklamp
            entity_2_icon: mdi:desk-lamp 
            entity_3: light.bathroom
            entity_3_icon: mdi:shower-head 
            media_player: media_player.40_tcl_roku_tv
            climate: climate.living_room
            popup_id: '#remote_bedroom'
            climate_popup: '#climate_bedroom'

Hi, maybe a new version available too soon. HA Core 2024.3, is not yet available.

The beta is actually available :wink:

I am having issues with the card_margin option inside a grid layout. It is not having an effect and if I am placing a grid inside a grid, the margins add up.

Tried card_margin: 0px 0px 0px 0px, card_margin: 0px 0px 0px 0px !important, card_margin: 0ā€¦

check this:

and this: