Making grid wider?

Configuration Frontend
1

Hi,

I’m trying to create an entities card and 2 gauge cards stacked on top of each other that line up nicely but also take up more space than 1 column.

I can make everything line up fine if i use a grid with 2 columns and just add the entities card and then a vertical stack with the 2 gauges, but then it’s only really one card wide. I would like it to be 2 full cards wide but still line up.

Screenshot 2021-12-17 121114
Screenshot 2021-12-17 1211141478×612 151 KB

This is the size of the cards i would like to have, i’ve built this using 2 grids next to each other, but the bottom doesn’t line up

Screenshot 2021-12-17 121203
Screenshot 2021-12-17 1212031455×611 128 KB

This is the layout i would like to have. but then in the size of the above cards. This lines up evreything as expected, but it’s just not wide enough.

I’ve looked into setting the view to panel, and use the blank button card, but then it sticks to the top without a gap and that doesn’t look good either.

Is there a simple solution for what i’m trying to do or do i just need to give up on my OCD

2 
type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    hui-entities-card {
      width: 80%;
      flex: unset !important; 
    }
    hui-vertical-stack-card {
      flex: unset !important; 
    }
card:
  type: horizontal-stack
  cards:
    - type: entities
      entities:
        - sun.sun
        - sun.sun
    - type: vertical-stack
      cards:
        - type: gauge
          entity: input_number.test_number
          min: 0
          max: 100
        - type: gauge
          entity: input_number.test_number_2
          min: 0
          max: 100

image

1 Like