Lovelace cards distribution

Configuration Frontend
1

Hi good afternoon,

I’m trying to do a distribution of cards like this one inside a view. Is that possible? I’ve tried with lovelace-card-mod but so far I have not succeeded.

Basically I would like to have a different number of cards with a different width in each row.

image

Regards

2

In particular the grid layout.

3

Thanks, I will take a look at the link with all the options mentioned there… I see I have a lot to read :slight_smile:

4

Ok, so I’ve done the following:

  • Create a view with grid as type
  • Added the following in options
grid-template-columns: 50px auto 50px
grid-template-rows: auto
grid-template-areas: |
  "main"
  • Created a new grid card with this configuration:
type: grid
columns: 1
title: OPNSense
cards:
  - type: entities
    state_color: true
    entities:
      - entity: binary_sensor.opnsense_pending_notices_present
      - entity: sensor.opnsense_system_boottime
      - entity: sensor.opnsense_cpu_load_average_one_minute
      ...... extra entities ......
square: false
view_layout:
  grid-area: main
  grid-column-start: 2
  grid-column-end: auto
  grid-row-start: 2
  grid-row-end: 3

And this is what I get

image
image1696×643 36.1 KB

It uses the whole width of the main area; I tried to duplicate the card and see if the width reduces to 50% but it does not work, the new card just comes on top of the original one

I’ve tried also to add this code at the end of the grid card (I tried with px values, percentage values and using :host instead of ha-card) but it does nothing

card_mod:
  style: |
    ha-card {
      width: 50%;
    }

Regards

5

This question now is better to ask in a corresponding thread: