Lovelace cards distribution

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.



In particular the grid layout.

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:

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: |
  • Created a new grid card with this configuration:
type: grid
columns: 1
title: OPNSense
  - type: entities
    state_color: true
      - entity: binary_sensor.opnsense_pending_notices_present
      - entity: sensor.opnsense_system_boottime
      - entity: sensor.opnsense_cpu_load_average_one_minute
      ...... extra entities ......
square: false
  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

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

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


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