Blank / Spacer Card In Grid

Share your Projects! Dashboards & Frontend
1

I searched the forum and didn’t find an answer that suited my needs so posting my version of the solution.

I try to no use custom components or cards and when searching for a blank or spacer card to use in the grid card everything seemed to be pointing to custom solutions. My solution is a bit of a hack but it works.

To get the blank spaces in the Master Bedroom and Window/Door Status areas below I used a button card with a generic entity, no name, no state and no icon. Then turn off the tap and hold actions and viola, a card that does nothing and shows nothing!

Capture.PNG
Capture.PNG1023×745 148 KB

UI based setup Example

I copied the config for cards 2 and 6 in the master bedroom grid. Same goes for cards 2 and 3 in the Window/Door Status grid.

Capture2
Capture2506×654 23 KB

YAML based setup example

  - type: grid
    title: Master Bedroom
    cards:
      - type: button
        entity: light.node_40
        icon: mdi:dome-light
        name: Light
        show_state: true
      - type: button
        tap_action:
          action: none
        entity: binary_sensor.updater
        show_state: false
        show_name: false
        show_icon: false
        hold_action:
          action: none
      - type: button
        entity: fan.node_53
        icon: mdi:fan
        name: Fan
        show_state: true
      - type: button
        entity: script.master_fan_cool_down
        name: Cool Down
        show_state: true
        tap_action:
          action: toggle
      - type: button
        entity: light.led_strip_light2
        icon: mdi:led-strip-variant
        name: Under Bed
        show_state: true
      - type: button
        tap_action:
          action: none
        entity: binary_sensor.updater
        show_state: false
        show_name: false
        show_icon: false
        hold_action:
          action: none
      - type: button
        tap_action:
          action: toggle
        entity: light.yeelight_5
        show_state: true
        name: Amy Lamp
      - type: button
        tap_action:
          action: toggle
        entity: light.yeelight_4
        show_state: true
        name: Adam Lamp
    columns: 4
2

I have a different solution (there is no empty box displayed, just an empty space):

  - type: custom:button-card
    color_type: blank-card
9 Likes
3

Im guessing you have custom button card installed? I am trying to do this without any custom items installed. I tried it and it errors as I don’t have custom button card installed.

1 Like
4

I must say this is a pretty genius answer. I too did not want to load any custom cards to accomplish something so seemingly simple. Thanks for sharing this.

1 Like
5

I had to figure this one out. You need to install GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
Either manually or via HACS.

6

Already posted and as noted in the original post I’m trying to do it without custom cards.

1 Like
7

An alternative solution would be the use of a markdown card with a single space as content:

      - type: markdown
        content: ' '
9 Likes
8

Thanks, this is much simpler to implement!

1 Like
9

But this also creates a dedicated (empty) card. The button card is just an invisible placeholder, looks nicer.

1 Like
10

Just add Grid Card and leave it empty.

2 Likes
11

you mean like this?

              type: grid
              cards: []

can confirm that to work, replacing the type: custom:gap-card that comes with custom:layout-card :wink:

6 Likes
12

Brilliant workaround. Avoids having an “empty” button frame, and creates an invisible spacer.

Would be nice if this was available as standard option… pull request anyone?

13

Thanks, this worked for me to have blank spaces

14

Brilliant !

15

Brilliant!!!

It’s such a better option that I think @silvrr should update his first post

1 Like
16

This is enough:

type: heading

You can then tweak the size on the layout tab.