Grid Rows And Columns Not Working in Swiper

Configuration Frontend
1

Hello,

I am using a css-swipe-card but i am unable to force the card sizes inside of the swiper

On the swiper it looks like this

image
image644×511 18.1 KB

But it sould look like this
image

The yaml i am using is below and i cant understand why it wont use the rows and columns

type: grid
cards:
  - type: custom:css-swipe-card
    cardId: YourUniqueCardName
    template: slider-horizontal
    auto_height: true
    pagination: true
    navigation: false
    card_gap: 0rem
    timer: 0
    navigation_next: mdi:chevron-right
    navigation_prev: mdi:chevron-left
    height: 10rem
    cards:
      - type: thermostat
        entity: climate.my_spa_heater
        name: Hot Tub
      - type: grid
        cards:
          - type: custom:timer-bar-card
            entity: timer.clean_filter
            name: Hot Tub - Rinse Filter (30 Days)
            icon: mdi:water
            invert: true
            bar_width: 80%
            format: d
            mushroom:
              layout: vertical
              color: green
            grid_options:
              columns: 6
              rows: 2
          - type: custom:timer-bar-card
            entity: timer.hot_tub_clean_filter
            name: Hot Tub - Clean Filter (60 Days)
            icon: mdi:spray-bottle
            invert: true
            format: d
            bar_width: 80%
            mushroom:
              layout: vertical
              color: yellow
            grid_options:
              columns: 6
              rows: 2
          - type: custom:timer-bar-card
            entity: timer.hot_tub_change_water_3_months
            name: Hot Tub - Change Water (3 Months)
            icon: mdi:water-pump
            invert: true
            format: d
            bar_width: 80%
            mushroom:
              layout: vertical
              color: blue
            grid_options:
              columns: 6
              rows: 2
          - type: custom:timer-bar-card
            entity: timer.hot_tub_service
            name: Hot Tub - Service (2 Years)
            icon: mdi:hammer-wrench
            invert: true
            format: d
            bar_width: 80%
            mushroom:
              layout: vertical
              color: purple
            grid_options:
              columns: 6
              rows: 2
          - type: custom:timer-bar-card
            entity: timer.hot_tub_non_chlorine_shock
            name: Hot Tub - Non-Chlorine Shock (14  Days)
            icon: mdi:chemical-weapon
            invert: true
            bar_width: 80%
            format: d
            mushroom:
              layout: vertical
              color: orange
            grid_options:
              columns: 6
              rows: 2
          - type: custom:timer-bar-card
            entity: timer.hot_tub_chlorine_shock
            name: Hot Tub - Chlorine Shock (14  Days)
            icon: fas:skull-crossbones
            invert: true
            bar_width: 80%
            format: d
            mushroom:
              layout: vertical
              color: red
            grid_options:
              columns: 6
              rows: 2
    custom_css:
      "--navigation-button-next-color": white
      "--navigation-button-next-background-color": cornflowerblue
      "--navigation-button-next-width": 50px
      "--navigation-button-next-height": 50px
      "--navigation-button-prev-color": white
      "--navigation-button-prev-background-color": orchid
      "--navigation-button-prev-width": 50px
      "--navigation-button-prev-height": 50px
      "--pagination-bullet-active-background-color": cornflowerblue
      "--pagination-bullet-distance": 5px
column_span: 1
2

Can you repost your code using the correct format?

Check out #11. Without the formatting, copy and pastie is impossible with the amount of code you shared.

3

Apologies i have added this in the correct format now

4

To start…You have auto_height: true and height: 10rem. Aren’t those conflicting settings?

I’m still working on your grid issue. Definitely fixable!

5

I’d suggest using vertical-stack with horizontal stacks like this

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: custom:timer-bar-card
        entity: timer.clean_filter
        name: Hot Tub - Rinse Filter (30 Days)
        icon: mdi:water
        mushroom:
          layout: vertical
          color: green
      - type: custom:timer-bar-card
        entity: timer.clean_filter
        name: Hot Tub - Clean Filter (60 Days)
        icon: mdi:spray-bottle
        mushroom:
          layout: vertical
          color: yellow
  - type: horizontal-stack
    cards:
      - type: custom:timer-bar-card
        entity: timer.clean_filter
        name: Hot Tub - Rinse Filter (30 Days)
        icon: mdi:water
        mushroom:
          layout: vertical
          color: green
      - type: custom:timer-bar-card
        entity:timer.clean_filter
        name: Hot Tub - Clean Filter (60 Days)
        icon: mdi:spray-bottle
        mushroom:
          layout: vertical
          color: yellow

or my preferred cards… custom:stack-in-card and custom:layout-card

type: custom:stack-in-card
cards:
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: 0px 0px 0px 0px
    cards:
      - type: custom:timer-bar-card
        entity:  timer.clean_filter
        name: Hot Tub - Rinse Filter (30 Days)
        icon: mdi:water
        mushroom:
          layout: vertical
          color: green
      - type: custom:timer-bar-card
        entity:  timer.clean_filter
        name: Hot Tub - Clean Filter (60 Days)
        icon: mdi:spray-bottle
        mushroom:
          layout: vertical
          color: yellow
  - type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 1fr 1fr
      margin: "-10px 0px 0px 0px"
    cards:
      - type: custom:timer-bar-card
        entity:  timer.clean_filter
        name: Hot Tub - Rinse Filter (30 Days)
        icon: mdi:water
        mushroom:
          layout: vertical
          color: green
      - type: custom:timer-bar-card
        entity:  timer.clean_filter
        name: Hot Tub - Clean Filter (60 Days)
        icon: mdi:spray-bottle
        mushroom:
          layout: vertical
          color: yellow
6

Brilliant thank you @LiQuid_cOOled for the help for anyone who stumbles on this question here is my final code

type: grid
cards:
  - type: custom:css-swipe-card
    cardId: YourUniqueCardName
    template: slider-horizontal
    auto_height: true
    pagination: true
    navigation: false
    card_gap: 0rem
    timer: 0
    navigation_next: mdi:chevron-right
    navigation_prev: mdi:chevron-left
    cards:
      - type: thermostat
        entity: climate.my_spa_heater
        name: Hot Tub
      - type: custom:stack-in-card
        cards:
          - type: custom:layout-card
            layout_type: custom:grid-layout
            layout:
              grid-template-columns: 1fr 1fr
              margin: 0px 0px 0px 0px
            cards:
              - type: custom:timer-bar-card
                entity: timer.clean_filter
                name: Hot Tub - Rinse Filter (30 Days)
                icon: mdi:water
                mushroom:
                  layout: vertical
                  color: green
              - type: custom:timer-bar-card
                entity: timer.clean_filter
                name: Hot Tub - Clean Filter (60 Days)
                icon: mdi:spray-bottle
                mushroom:
                  layout: vertical
                  color: yellow
          - type: custom:layout-card
            layout_type: custom:grid-layout
            layout:
              grid-template-columns: 1fr 1fr
              margin: "-10px 0px 0px 0px"
            cards:
              - type: custom:timer-bar-card
                entity: timer.clean_filter
                name: Hot Tub - Rinse Filter (30 Days)
                icon: mdi:water
                mushroom:
                  layout: vertical
                  color: green
              - type: custom:timer-bar-card
                entity: timer.clean_filter
                name: Hot Tub - Clean Filter (60 Days)
                icon: mdi:spray-bottle
                mushroom:
                  layout: vertical
                  color: yellow
      - type: thermostat
        entity: climate.my_spa_heater
        name: Hot Tub
    custom_css:
      "--navigation-button-next-color": white
      "--navigation-button-next-background-color": cornflowerblue
      "--navigation-button-next-width": 50px
      "--navigation-button-next-height": 50px
      "--navigation-button-prev-color": white
      "--navigation-button-prev-background-color": orchid
      "--navigation-button-prev-width": 50px
      "--navigation-button-prev-height": 50px
      "--pagination-bullet-active-background-color": cornflowerblue
      "--pagination-bullet-distance": 5px
column_span: 1