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

[Duke_box]

That explains it. I do have the Gzip file but even then after editing the scroll bars remain in my grid views

I have solved it by making my grid layout views into nested layout-cards with vertical and horizontal views as Thomas suggested in post #89

Thanks for everyone’s input.

[QSKONE]

Hello , My Layout-card missing after page refresh. Can you help me?

cards:
  - decimals: 1
    entities:
      - entity: sensor.livingroom_temp_temperature
        index: 0
    hour24: true
    hours_to_show: 24
    line_color: red
    points_per_hour: true
    type: 'custom:mini-graph-card'
  - decimals: 1
    entities:
      - entity: sensor.bedroom_temp_temperature
        index: 0
    hour24: true
    hours_to_show: 24
    line_color: green
    points_per_hour: true
    type: 'custom:mini-graph-card'
  - decimals: 1
    entities:
      - entity: sensor.bme280_temperature
        index: 0
    hour24: true
    hours_to_show: 24
    line_color: blue
    name: Outside Temp
    points_per_hour: true
    type: 'custom:mini-graph-card'
  - entities:
      - entity: sensor.processor_use
      - entity: sensor.memory_use_percent
      - entity: sensor.disk_use_percent_home
    type: entities
  - entities:
      - entity: person.qsk
      - entity: binary_sensor.door_sensor_contact
      - entity: binary_sensor.water_leak_water_leak
      - entity: binary_sensor.motion_sensor_occupancy
      - entity: binary_sensor.camera_motion
    show_header_toggle: false
    type: entities
  - entities:
      - entity: sensor.miflora_soil_conductivity
      - entity: sensor.miflora_illuminance
      - entity: sensor.miflora_moisture
      - entity: sensor.miflora_temperature
    show_header_toggle: false
    title: Tomato
    type: entities
layout: horizontal
max_columns: 3
type: 'custom:layout-card'

[Joel_Marambaia]

same is happening here.

[kdw2060 (Kris De Winter)]

@mneuron

f you change the margins to 0px the scroll bars are gone

#columns { display: flex; flex-direction: row; justify-content: center; margin-top: -8px; }
.column:first-child { margin-left: -4px; }
.column:last-child { margin-right: -4px; }

I’ve removed the margins in my fork, haven’t tested much but seems to work.

[NdR (Andrea Montanari)]

Do you have some news about the implementation of your work in the original card?

[kdw2060 (Kris De Winter)]

No, haven´t got any reaction to the Github PR. Now, I sometimes also visit the Home Assistant Discord server and notice that Thomas is quite busy helping out on the lovelace frontend development, so I guess most of his time is focused on that and less on the custom cards.

Responsive grid layouts should become a standard feature at some point is what I gather from the developer’s comments in this topic, but will take some time.

[mirekmal (Mirek Malinowski)]

tried to follow the instructions (removed margins, deleted .gz file, cleared cache, reloaded) but no change. Scrollbars are still there Tested in few browsers/systems…

[Duke_box]

Yes the scroll bars never went for me either by doing that.

The only way I found to get rid of them was to NOT use grid layout at all!
As I previously said I converted my grid layout views to nested vertical and horizontal layouts within card_mod as per Thomas’s post number 89 in this thread.

[mirekmal (Mirek Malinowski)]

yeah… here is my octoprint layout… Lets try to achieve it with stack-in-stack-in-stack…

Not saying not possible

[kdw2060 (Kris De Winter)]

weird, I don’t have them anymore, but I also removed the margins for #staging.grid, don’t know if you did that too. To make sure the adapted card is loaded, change the info-text that’s displayed in the browser console too, so you can quickly see if it the changed version got loaded.

[mirekmal (Mirek Malinowski)]

Thanks Kris!
Removing margin for #staging.grid did the trick!
I’ll recheck later on my home mac/safari, but on my windows laptop scroll bars are gone!

[tpx01]

I’m having a lot of issues with the margins (clipping on top, scrollbars due to margin left and right, etc). I saw that there are some PRs open to fix these. Do you have a time @thomasloven when can we expect to see these merged?

[CDRX2]

Hi,

I’m currently trying to use the layout card to create a sidebar on my frontend. I’ve however run into a snag. There are margins between the cards that I would like to get rid of. Best explained with a screenshot where I’ve already identified the culprit thanks to the developer tools of my browser:

Unticking that CSS property does get rid of the margins (in orange in the screenshot), however I’ve not been able to figure out what code would need to go where in order to remove those margins.

My basic config (reduced it so it’s readable):

title: Dev

views:

- title: Dev
  icon: 'mdi:github'
  panel: true
  badges: []
  path: dev
  cards:
    - type: 'custom:layout-card'
      layout: grid
      gridrows: auto
      gridcols: 23% 77%
      gridgap: 0px
      gridplace: stretch
      cards:
        - !include frontend/sidebar_dev.yaml

        - type: 'custom:config-template-card'
          gridrow: 1 / 1
          gridcol: 2 / 2
          entities:
            - ...
          card:      
            type: 'custom:swipe-card'
            parameters:
              effect: 'cube'
              cubeEffect: 
                shadow: false
                slideShadows: false
            cards:
              - !include frontend/dev_rez.yaml
              - !include frontend/dev_1er.yaml

I’ve also tried many different combinations combined with a mod-card in which I then configure the above layout-card, but no dice.

As far as my understanding of CSS goes, the correct properties should be inserted somewhere here and not within the included yaml files. Should I be wrong, I’ll gladly post their content as well.

Thanks for any help!

[CDRX2]

The answer from here:

        style:
          layout-card$: |
            .grid > * {
              margin: 0px !important;
            } 

[vinzcenzo (Vincent)]

Hi Thomas,

Many thanks for your great Lovelace contributions

I try to setup a grid layout with « custom:button-card » and « custom:layout-card ». In other word, I would like to achieve a configuration like this HTML table layout (colspan / rowspan)

<table>
	<tr>
		<th colspan="2" rowspan="2">Date/Clock</th> 
		<td>btn1</td>
		<td>btn2</td>
	</tr>
	<tr>   
		<td>btn3</td>
		<td>btn4</td>
	</tr>
		<tr>
		<td>btn5</td>
		<td>btn6</td>
		<td>btn7</td>
		<td>btn8</td>
	</tr>
</table>

Is there a way to do it without nesting components under other « entitiy » types (to limit indent level)?

Many thanks in advance for advises.

[vinzcenzo (Vincent)]

for the moment the best arrangement I was able to do is : a mix of “vertical-stack” and “horizontal-stack”… I finally don’t try to use any more “layout-card” because it was resizing blank button-card (color_type: blank), then i was losing proportion between button5 and button8 if button6/7 are blank!

My solution :

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        icon: 'mdi:clock'
        style: 'ha-card { height: 100%; }'
        name: clock
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                icon: 'mdi:numeric-1-box-outline'
                name: button1
              - type: 'custom:button-card'
                icon: 'mdi:numeric-2-box-outline'
                name: button2
          - type: horizontal-stack
            cards:
              - type: 'custom:button-card'
                icon: 'mdi:numeric-3-box-outline'
                name: button3
              - type: 'custom:button-card'
                icon: 'mdi:numeric-4-box-outline'
                name: button4
  - type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        icon: 'mdi:numeric-5-box-outline'
        name: button5
      - type: 'custom:button-card'
        icon: 'mdi:numeric-6-box-outline'
        name: button6
      - type: 'custom:button-card'
        icon: 'mdi:numeric-7-box-outline'
        name: button7
      - type: 'custom:button-card'
        icon: 'mdi:numeric-8-box-outline'
        name: button8

[JeroenDeckers]

Hello i want to try using this layout-card but i can’t seem to get a simple 2 card horizontal layout.

Screenshot

Code:

  - id: 8 
    icon: mdi:washing-machine
    name: Housekeeping-TEST
    cards:
      - type: 'custom:layout-card'
        layout: horizontal
        cards:
        
#################################################################
#                                                               #
#              Housekeeping - Laundry Status Card               #
#                                                               #
#################################################################

        - type: entities
          style: |
            ha-card {
              --ha-card-background: rgba(150, 150, 150, 0.2);
              --primary-text-color: white;
              --secondary-text-color: var(--primary-text-color);
              --paper-item-icon-color: white
              --width: 200%
            }
          entities:
            - type: 'custom:text-divider-row'
              text: Laundry
            - type: 'custom:stack-in-card'
              cards:
                - type: 'custom:button-card'
                  entity: sensor.washing_machine_status
                  name: Washing machine
                  size: '15%'
                  style:
                    - font-size: 14px
                - type: entities
                  entities:
                  - entity: sensor.washing_machine_status
                    name: Status
                  - entity: binary_sensor.washing_machine_door
                    name: Door status
                - type: conditional
                  conditions:
                    - entity: sensor.washing_machine_status
                      state : "In use"
                  card:
                    type: entities
                    entities:
                      - entity: sensor.washing_machine_remaining_time
                        name: Time remaining
                        icon: 'mdi-clock'
                      - entity: sensor.washing_machine_finish_time
                      - entity: sensor.washing_machine_progress
                      - entity: sensor.washing_machine_energy_consumption
                      - entity: sensor.washing_machine_water_consumption

        - type: entities
          style: |
            ha-card {
              --ha-card-background: rgba(150, 150, 150, 0.2);
              --primary-text-color: white;
              --secondary-text-color: var(--primary-text-color);
              --paper-item-icon-color: white
              --width: 200%
            }
          entities:
            - type: 'custom:text-divider-row'
              text: Laundry
            - type: 'custom:stack-in-card'
              cards:
                - type: 'custom:button-card'
                  entity: sensor.washing_machine_status
                  name: Washing machine
                  size: '15%'
                  style:
                    - font-size: 14px
                - type: entities
                  entities:
                  - entity: sensor.washing_machine_status
                    name: Status
                  - entity: binary_sensor.washing_machine_door
                    name: Door status
                - type: conditional
                  conditions:
                    - entity: sensor.washing_machine_status
                      state : "In use"
                  card:
                    type: entities
                    entities:
                      - entity: sensor.washing_machine_remaining_time
                        name: Time remaining
                        icon: 'mdi-clock'
                      - entity: sensor.washing_machine_finish_time
                      - entity: sensor.washing_machine_progress
                      - entity: sensor.washing_machine_energy_consumption
                      - entity: sensor.washing_machine_water_consumption 

[maxym]

try to force number of columns

- type: 'custom:layout-card'
        layout: horizontal
        column_num: 3
        cards:

[jchampagne]

I am using the layout-card, auto-entities, and button-card together and overall is working well. However, as you can see from the card definition below, my title for the “card” is defined in the horizontal-stack. This is the only way I’ve been able to get a title to appear for the card. The problem is that the title still appears when the list of entities provided by auto-entities is empty. How can I get a title for this that only appears when I have entities?

  - type: horizontal-stack
    title: Unlocked Doors
    cards:
      - type: 'custom:auto-entities'
        show_empty: false
        card:
          type: 'custom:layout-card'
          column_num: 2
        filter:
          include:
            - domain: lock
              options:
                type: 'custom:button-card'
                layout: vertical
                tap_action:
                  action: toggle
          exclude:
            - state: locked

[Mariusthvdb (Marius)]

coming to you with my very first (close to successful) attempt at a layout config:

# buttons_alerts_layout.yaml
type: custom:layout-card
#layout: horizontal
#min_height: <min_height>
#min_columns: <min_columns>
#max_columns: <max_columns>
column_num: 4
#column_width: <column_width>
#max_width: <max_width>
#min_width: <min_width>
#sidebar_column: <sidebar_column>
#flex_grow: <flex_grow>
#gridcols: <grid_cols>
#gridrows: <grid_rows>
#gridgap: <grid_gap>
#gridplace: <grid_place>
#justify_content: start
rtl: ltr

#card_options:
#    <card_options>
cards:

  - type: conditional
    conditions:
 etc etc etc

and card config:

type: conditional
conditions:
  - entity: sensor.count_alerts_notifying
    state_not: '0'
card:
  type: vertical-stack
  cards:
    - !include /config/lovelace/includes/include_button_marquee_alerts.yaml
    - !include /config/lovelace/buttons/buttons_alerts_layout.yaml

needed the rtl: ltr because it would otherwise show the cards from r to l using the default (none) setting.

all in all this seems ok, with 2 gripes: the space between the scrolling button with the alerts, and the 2 live buttons is too small, and the space at the bottom of the 2 live buttons to the next card is too large.

Thought I would have to use some of the justify_content options but I cant seem to influence the position. Would anyone of you know where to begin?

this even spacing between buttons is what I am after:

thanks for having a look!

edit
seems this not yet merged PR takes care of the issue: https://github.com/thomasloven/lovelace-layout-card/pull/97/files

set it to margin-top: -4px; though which fits my needs better:

edit

hmmm, guess the main question is how to have the cards fill from left to right…

update

well fiddling with the margins hasnt got the same effect on all devices. As far as I have noticed especially the iOS app now goes beyond the expected card space when using the adapted margin-left. When using the daytime theme, I do notice some heavy shadowing I cant explain according to my own cards stylings. I fear that is what is causing the margins to be so complex/confusing to set.