Lovelace empty space between two cards

Configuration
1

hi all. i have this grid im building

square: true
columns: 1
type: grid
cards:
  - show_state: false
    show_name: false
    camera_view: auto
    type: picture-entity
    entity: camera.frontdoor
    camera_image: camera.frontdoor
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: person.zeltak
      - type: alarm-control-panel
        entity: alarm_control_panel.alarmo

im tryin to understand how does one get rid of an annoying empty space between two cards (the camera and chips)

image
image498×594 29.8 KB

does anyone know how thats possible, that is move the chip card right beneath the camera insted of the empty space (marked in red)

thx so much

Z

2

You need the card-mod installation, which can be found in HACS.

Then try to play around with something like this:

type: custom:vertical-stack-in-card
cards:
  - type: markdown
    content: '# Box1'
    style: |
      ha-card {
        box-shadow: none;
        border: none;
        margin: 0;
      }
      ha-markdown.no-header {
        box-shadow: none;
        padding: 0 0 0 20px;
        border: none;
        margin: 0;
      }
  - type: markdown
    content: '# Box2'
    style: |
      ha-card {
        box-shadow: none;
        border: none;
        margin: 0;
      }
      ha-markdown.no-header {
        box-shadow: none;
        padding: 20px 0 0 0;
        border: none;
        margin: 0;
      }

I have not completely figured out that px suffix on those 4 numbers, so try putting it on and remove it till you get the desired effect.