đŸ”č Layout-card - Take control of where your cards end up

Hi guys, is it possible to have a conditional number of columns (1-2-3), keeping the total width everytime 100%?
I mean 1 column 100%, 2 columns 50% each, 3 columns 33% each?
Each column = 1 card (entities)

Use grid-template-columns: to define your width, with fr in order not to mess-up margins (my css is rusty though).

For example :

# lovelace_gen
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: auto
grid-gap: 5%
grid-template-areas: |
  "header1 header2 header3 header4"

Will give you 4 columns at 25% width each. If you want the number of columns to change, you can use mediaqueries or state-switch which should be more than enough for most cases.

A horizontal layout with a very high max_width would probably work.

@thomasloven can you help me?
I tried now with this, all comes back but my buttons arent placed horizontally, they show vertical although horizontal is asked (yes cleared cache, even used breaks 
)[code]
title: Home
icon: mdi:home-outline
path: Home
type: custom:layout-card
layout_type: vertical
layout_options:
max_cols: 3
cards:

  • type: custom:stack-in-card
    mode: horizontal
    style: |
    ha-card {
    background-color: transparent !important;
    box-shadow: none !important;
    }
    cards:
    • type: markdown
      content: |
      {{ states.sensor.date_short.state }}
      style: |
      ha-card {
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0);
      font-size: 100%;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      text-align: left;
      }
    • type: markdown
      content: |
      {{ states.sensor.temperature.state }}°C
      style: |
      ha-card {
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0);
      font-size: 100%;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      text-align: right;
      }
  • type: custom:layout-card
    layout_type: vertical
    layout_options:
    max_cols: 3
    cards:
    • type: markdown
      content: |
      {{ states(‘sensor.greeting’) }}
      style: |
      ha-card {
      margin-top: 5px;
      background-color: rgba(0, 0, 0, 0);
      font-size: 100%;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      text-align: center;
      }
      h1, h3 {
      font-weight: 400 !important;
      }
    • type: custom:swipe-card
      parameters:
      allowTouchMove: true
      grabCursor: true
      autoplay:
      disableOnInteraction: false
      cards:
      !include 
/
/includes/notifications.yaml
  • type: custom:layout-card
    layout_type: horizontal
    layout_options:
    max_cols: 3
    max_height: 96
    cards:
    • type: custom:button-card
      entity: sensor.postbus
      state:
      • value: “closed”
        icon: mdi:mailbox
      • value: “open”
        icon: mdi:mailbox-up
        styles:
        icon:
        - color: var(–primary-color)
        style: |
        ha-card {
        height: 96px;
        text-align: center;
        }
        tap_action:
        action: call-service
        service: homeassistant.turn_off
        service_data:
        entity_id:
        - input_boolean.brievenbus
        - input_boolean.pakjesbus
    • name: Alarm
      type: custom:button-card
      tap_action: !include popup/alarm.yaml
      entity: alarm_control_panel.risco
      state:
      • value: “disarmed”
        icon: mdi:shield-off
      • value: “armed_away”
        icon: mdi:shield-check
        styles:
        icon:
        - color: var(–primary-color)
      • value: “armed_home”
        icon: mdi:shield-half-full
        styles:
        icon:
        - color: var(–primary-color)
        style: |
        ha-card {
        height: 96px;
        text-align: center;
        }
    • name: Garagepoort
      type: custom:button-card
      entity: binary_sensor.garage_poort
      state:
      • value: “on”
        icon: mdi:garage-open-variant
      • value: “off”
        icon: mdi:garage-variant
        styles:
        icon:
        - color: var(–primary-text-color)
        style: |
        ha-card {
        height: 96px;
        text-align: center;
        }
        tap_action:
        action: call-service
        service: homeassistant.toggle
        service_data:
        entity_id: switch.garagepoort
    • entity: person.stijn
      type: picture-entity
      image: /local/stijn.jpg
      tap_action: !include popup/persoon1.yaml
      style: |
      ha-card {
      height: 96px !important;
      }
    • type: picture-entity
      entity: person.james
      image: /local/hond.jpg
      show_state: false
      tap_action: !include popup/dog.yaml
      style: |
      ha-card {
      height: 96px !important;
      }
    • type: picture-entity
      entity: person.kim
      image: /local/kim.jpg
      tap_action: !include popup/persoon2.yaml
      style: |
      ha-card {
      height: 96px !important;
      }
    • name: Verlichting
      type: custom:button-card
      icon: mdi:lightbulb-outline
      tap_action: !include popup/verlichting.yaml
      style: |
      ha-card {
      height: 96px;
      }
    • name: Security
      type: custom:button-card
      icon: mdi:cctv
      tap_action: !include popup/security.yaml
      style: |
      ha-card {
      height: 96px;
      text-align: center;
      }
    • name: Entertainment
      type: custom:button-card
      icon: mdi:television-classic
      tap_action: !include popup/entertainment.yaml
      style: |
      ha-card {
      height: 96px;
      –paper-item-icon-active-color: #e79118;
      }
    • name: Huishouden
      type: custom:button-card
      icon: mdi:broom
      tap_action: !include popup/household.yaml
      style: |
      ha-card {
      height: 96px;
      text-align: center;
      }
    • name: Temperatuur
      type: custom:button-card
      icon: mdi:home-thermometer-outline
      tap_action: !include popup/temperatuur.yaml
      style: |
      ha-card {
      height: 96px;
      text-align: center;
      }
    • name: Server
      type: custom:button-card
      icon: mdi:nas
      tap_action: !include popup/server.yaml
      style: |
      ha-card {
      height: 96px;
      }
    • name: Netwerk
      type: custom:button-card
      icon: mdi:server-network
      tap_action: !include popup/network.yaml
      style: |
      ha-card {
      height: 96px;
      }
    • name: Energie
      type: custom:button-card
      icon: mdi:power-plug
      tap_action: !include popup/energie.yaml
      style: |
      ha-card {
      height: 96px;
      }
    • name: Sensoren
      type: custom:button-card
      icon: mdi:leak
      tap_action: !include popup/sensoren.yaml
      style: |
      ha-card {
      height: 96px;
      text-align: center;
      }
      [/code]

I am lost a bit. What should I understand under very high max_width?

A high max_width will let the columns get very wide, such that they can cover 100, 50 or 33 % of the screen.

OK. Thanks. I will try.
But must update layout-card first :face_with_monocle:

Would you mind reading this post and act accordingly? That would be very pleasant. And btw. it is not a good tone, to mark someone with an @ if you just want to ask for help. That’s what this (or other threads) are for, or do just want him and not others to help? :wink:

Hi guys,
what is the easiest way to adapt this code with the new grid layout?

type: 'custom:layout-card'
layout: horizontal
column_num: 2
column_width:
  - 70%
  - 30%
cards:

Thanks!

Hello,

I had configured my dashboard to look like this:

Yesterday i Updated layout-card plugin and now my dashboard look like this:

Is it due to the addition of resposive function? How can I fix this?

Thank you

Updated from which version?

V2.2.2 and this morning 2.2.3

1 Like

That’s very odd since 2.2.3 was actually tagged wrong and exactly the same as 2.2.2

What kind of layout do you use, and what does your setup look like in general?

Hi Thomas,
Can I control the row height in a card?
/Niklas

I don’t quite understand the meaning of your question. Here is the configuration of the card that I use.

type: 'custom:layout-card'
layout: grid
column_width: 90%
gridrows: 130px 130px 520px 130px 70px 70px 100px 100px 100px
gridcols: 4px 260px 160px 100px
cards:
  - type: button
    entity: alarm_control_panel.alarm_mqtt
    show_name: false
    icon_height: 50px
    gridrow: 1 / 2
    gridcol: 2/3
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: more-info
        entity: cover.volet2
        icon: 'mdi:window-shutter'
        name: RDC
        hold_action:
          action: none
      - type: button
        tap_action:
          action: more-info
        entity: cover.volet
        icon: 'mdi:window-shutter'
        name: R+1
        hold_action:
          action: none
    gridcol: 2/3
    gridrow: 2/3
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.portail_2
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: switch.porte_de_garage
        show_name: false
    gridcol: 3/5
    gridrow: 1/2
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: light.toutes_les_lumieres
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: switch.serrure_entree_2
        show_name: false
    gridcol: 3/5
    gridrow: 2/3
  - type: entities
    entities:
      - entity: light.cuisine
        type: 'custom:slider-entity-row'
      - entity: light.spot_cuisine
        type: 'custom:slider-entity-row'
      - entity: light.sejour
        type: 'custom:slider-entity-row'
      - entity: light.salon
        type: 'custom:slider-entity-row'
      - entity: light.lampes_salon
        icon: 'mdi:floor-lamp-variant'
        type: 'custom:slider-entity-row'
      - entity: light.pallier
        type: 'custom:slider-entity-row'
      - entity: light.mur_pierre
      - entity: light.facade
        name: Maison
      - entity: light.dimmable_light_3
        name: Atelier
      - entity: light.dimmable_light_2
        name: Atelier
    show_header_toggle: false
    gridrow: 3 / 4
    gridcol: 2 / 5
  - type: glance
    entities:
      - entity: sensor.tdeg_moyenne_rdc_temperature
      - entity: sensor.humidite_moyenne_rdc
      - entity: sensor.tdeg_moyenne_etage_temperature
      - entity: sensor.humidite_moyenne_etage
    gridcol: 2/5
    gridrow: 4/5
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.poubelles_2
        show_name: false
        hold_action:
          action: none
      - type: button
        tap_action:
          action: none
        entity: switch.camera
        show_name: false
        hold_action:
          action: none
      - type: button
        tap_action:
          action: toggle
        entity: switch.invite
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: switch.vancances
        show_name: false
      - type: button
        tap_action:
          action: toggle
        entity: binary_sensor.tous_les_capteurs_d_ouverture
        show_name: false
      - type: button
        entity: switch.alarme_batterie_voyant
        show_name: false
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('switch.alarme_batterie_voyant', 'on') %} red {% endif %};
          }
        tap_action:
          action: navigate
          navigation_path: /lovelace/batterie
    gridcol: 2/5
    gridrow: 5/6
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: toggle
        entity: switch.thermostat_atelier_on_off
        show_name: false
        hold_action:
          action: none
      - type: button
        tap_action:
          action: none
        entity: binary_sensor.detecteur_fumee_rdc_et_etage_2
        show_name: false
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('binary_sensor.detecteur_fumee_rdc_et_etage_2', 'on') %} red {% endif %};
          }
        hold_action:
          action: none
      - type: button
        tap_action:
          action: none
        entity: binary_sensor.detecteur_fumee_rdc_et_etage
        show_name: false
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('binary_sensor.detecteur_fumee_rdc_et_etage', 'on') %} red {% endif %};
          }
      - type: button
        tap_action:
          action: toggle
        entity: switch.aquarium
        show_name: false
      - type: button
        tap_action:
          action: none
        entity: switch.xbox
        show_name: false
      - type: button
        show_name: false
        entity: binary_sensor.capteur_d_eau_baignoire
        style: |
          ha-card {
            --paper-item-icon-active-color: {% if is_state('binary_sensor.capteur_d_eau_baignoire', 'on') %} red {% endif %};
          }
        icon_height: 50px
        tap_action:
          action: none
    gridcol: 2/5
    gridrow: 6/7
  - type: thermostat
    entity: climate.thermostat_atelier_2
    gridcol: 2/4
    gridrow: 7/10
  - type: button
    entity: light.dimmable_light_4
    tap_action:
      action: none
    show_name: false
    gridrow: 7/8
    gridcol: 4/5
  - type: button
    entity: switch.smart_plug_6
    show_name: false
    tap_action:
      action: none
    gridcol: 4/5
    gridrow: 8/9
  - type: button
    entity: light.dimmable_light_8
    show_name: false
    gridcol: 4/5
    gridrow: 9/10
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.speedtest_download
    icon: 'mdi:cloud-download'
    line_color: greenyellow
    show:
      name: false
      header: false
      icon: false
      fill: fade
    font_size: 80
    decimals: 0
    height: 80
    hour24: true
    animate: true
    gridcol: 2/3
    gridrow: 10/11
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.speedtest_upload
    icon: 'mdi:cloud-upload'
    font_size: 80
    line_color: cyan
    show:
      name: false
      header: false
      icon: false
      fill: fade
    decimals: 0
    height: 80
    hour24: true
    animate: true
    gridcol: 3/5
    gridrow: 10/11
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.speedtest_ping
    icon: 'mdi:cloud-refresh'
    font_size: 80
    line_color: deeppink
    show:
      name: false
      header: false
      icon: false
      fill: fade
    decimals: 0
    height: 80
    hour24: true
    animate: true
    gridcol: 2/5
    gridrow: 11/12

Ok, you have some problems on lines 2, 3, 4, 5, 11, 12, 31, 32, 45, 46, 59, 60, 84, 85, 92, 93, 135, 136, 186, 187, 190, 191, 197, 198, 204, 205, 209, 210, 226, 227, 243, 244, 260 and 261.
I.e. parameters that are not supported since version 2.0.

I suggest using HACS for installing lovelace plugins. Then you would have seen something like this when trying to update:


and have been allerted about things having changed.

Ok. Is it possible to downgrade to previous release before 2.0?

Yes. There’s a setting in HACS how many previous versions to show, and when that it high enough you can select to instal release 16.

If you’re not using HACS, just download and install this: https://github.com/thomasloven/lovelace-layout-card/releases/tag/16

To clarify what I mean:
Look at @sebyldino’s card, can I have the rows with cuisine, spot cuisine etc. tighter, less space between the each row?
/Niklas

People really should at least scroll through the guide linked from the readme


At least look at the pictures.

2 Likes