Vertically aligned cards - Guide

[Mod74]

Hi. Complete Home Assistant noob, so I'm not sure of the etiquette for posting this. Excuse any format errors. I know it's not an actual Issue, but I thought it might help someone. I've just spent the last couple days messing with theme files trying to align the cards vertically so thought I'd share this solution. This might be obvious to veteran user but figured it might help a noob. Please note I'm using the update fork cremp has kindly created https://github.com/crempp/banner-card but I have placed here as this is where users seem to be.

I'm using kibibit theme https://github.com/Kibibit/hass-kibibit-theme

The problem.

The solution.

I installed both mod-card and layout-mod via HACS.

I selected the View Type Grid (layout card) in the Dashboard editor and gave it the variable

grid-template-columns: 33% 33% 33%

There's probably a better way to divide into three but this worked.

Then in the actual card I applied the following from card-mod

style: |
  ha-card {
    height: 100%
  }
  .overlay-strip {
    height: 100%
  }

So a full card would look like this

type: custom:banner-card
row_size: auto
heading: Lighting
style: |
  ha-card {
    height: 100%
  }
  .overlay-strip {
    height: 100%
  }
entities:
  - entity: light.big_light
    name: Big Light
    domain: sensor
    action:
      service: light.toggle
    value: mdi:ceiling-light
    color: gray
    map_state:
      'on':
        color: yellow
  - entity: light.lamp
    name: Lamp
    domain: sensor
    action:
      service: light.toggle
    value: mdi:floor-lamp-torchiere-variant
    color: gray
    map_state:
      'on':
        color: yellow
  - entity: light.cabinet_lights_v3
    name: Kitchen
    domain: sensor
    action:
      service: light.toggle
    value: mdi:wall-sconce-flat
    color: gray
    map_state:
      'on':
        color: yellow
  - entity: light.bedroom_light
    name: Bedroom
    domain: sensor
    action:
      service: light.toggle
    value: mdi:lamp
    color: gray
    map_state:
      'on':
        color: yellow

I've included this as it includes some extras I pieced together, but it an ordinary card would work fine as well. It's only really the cards with icons that the height gets thrown off.

Finished/fixed

Thanks.