Rows of icons with minimal spacing

Configuration Frontend
1

Hi Community,

I am hoping to get some advice to achieve a simple icon based status monitor.

I am currently using custom button cards which mostly gets what I am after, but it has a hideous amount of blank space around. I am trying to fit this along with other items on a 1920x1080 display so space is crucial.

Screenshot 2025-01-24 at 05.12.44

I have the code to change colour based on state. Essentially my goal is to be able look at my display, see rows of 5 or 6 icons each, either Green for up, Red for down.

Here is the code I am using so far:

- type: custom:button-card
    entity: sensor.uptimekuma_bookstack
    show_name: false
    show_icon: true
    icon: mdi:book
    show_state: false
    tap_action:
      action: more-info
    state:
      - value: down
        color: red
      - value: up
        color: green
    grid_options:
      columns: 3
      rows: 1
  - type: custom:button-card
    entity: sensor.uptimekuma_flood
    show_name: false
    show_icon: true
    icon: mdi:waves
    show_state: false
    tap_action:
      action: more-info
    state:
      - value: down
        color: red
      - value: up
        color: green
    grid_options:
      columns: 3
      rows: 1

And so on for each service.

Any advice to fit more icons per row neatly?

2

Each section is a Grid card.
In general, customizing gaps in Grid card is possible by card-mod:

type: custom:mod-card
card_mod:
  style: |
    ha-card {
      background: red;
      --grid-card-gap: 0x;
    }
card:
  type: grid
  columns: 2
  cards:
    - &ref_card
      type: button
      entity: sun.sun
    - *ref_card
    - *ref_card
    - *ref_card

image

In sections, a similar way may be used:

  - type: sections
    title: xxx
    path: xxx
    sections:
      - type: grid
        cards:
          - type: heading
            heading: New section
          - type: custom:mod-card
            card_mod:
              style: |
                ha-card {
                  background: red;
                  --grid-card-gap: 0x;
                }
            card:
              type: grid
              square: false
              cards:
                - &ref_card
                  type: markdown
                  content: xxx
                - *ref_card
                - *ref_card
                - *ref_card
                - *ref_card
                - *ref_card
                - *ref_card
                - *ref_card

image