🔹 Card-mod - Add css styles to any lovelace card

[Ildar_Gabdullin]

Picture Glance - distributing icons

code

type: vertical-stack
cards:
  - camera_view: auto
    type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) div:nth-child(4) {
          flex-basis: 100%;
        }
        .box div:nth-child(1) {
          flex-wrap: wrap;
        }
  - type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) {
          display: grid !important;
          grid-template-columns: repeat(4,1fr);
        }
  - type: picture-glance
    image: /local/images/test/blue.jpg
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
      - entity: input_boolean.test_boolean
    card_mod:
      style: |
        .box div:nth-child(1) div:nth-child(4) {
          flex-basis: 100%;
        }
        .box div:nth-child(1) {
          flex-wrap: wrap;
        }
        .box div:nth-child(2) {
          display: grid !important;
          grid-template-columns: repeat(4,1fr);
          max-height: 80px;
        }