How to arrange cards

my cards arrange to the right of the screen after the first row. How do I get them to arrange and wrap? this has been driving me nuts for months.

Jeff

You could try the grid card or the use vertical stack and horizontal stack cards.

type: grid
columns: 4
square: false
cards:
  - type: vertical-stack
    title: ''
    cards:
      - type: 'custom:canvas-gauge-card'
        card_height: 250
        entity: sensor.utility_voltage
        background_color: ''
        name: ''
        gauge:
          type: radial-gauge
          title: Utility
          width: 250
          height: 250
          minValue: 0
          maxValue: 280
          startAngle: 40
          ticksAngle: 280
          valueBox: true
          units: Vac
          majorTicks:
            - 0
            - 28
            - 56
            - 84
            - 112
            - 140
            - 168
            - 196
            - 224
            - 252
            - 280
          minorTicks: 10
          strokeTicks: true
          highlights:
            - from: 0
              to: 218
              color: 'rgba(234, 51, 36, .75)'
            - from: 218
              to: 228
              color: 'rgba(255, 255, 85, .75)'
            - from: 228
              to: 252
              color: 'rgba(104, 225, 67, .75)'
            - from: 252
              to: 262
              color: 'rgba(255, 255, 85, .75)'
            - from: 262
              to: 280
              color: 'rgba(234, 51, 36, .75)'
          borders: false
          needleType: arrow
          needleWidth: 4
          needleCircleSize: 7
          needleCircleOuter: true
          needleCircleInner: false
          animationDuration: 1500
          animationRule: linear
          valueBoxBorderRadius: 10
          colorValueBoxRect: '#222'
          colorValueBoxRectEnd: '#333'
          valueDec: 0
          valueInt: 0
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.utility_voltage
        unit: ''
        name: Utility Voltage (24 Hr)
        icon: 'mdi:transmission-tower'
        show:
          fill: true
          legend: false
          labels: false
          name: true
          points: false
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
          show_legend: false
        font_size: 75
        line_width: 3
        points_per_hour: 4
        hours_to_show: 24
        lower_bound: 200
        upper_bound: 260
        decimals: 0
        color_thresholds_transition: hard
        color_thresholds:
          - value: 0
            color: '#EA3324'
          - value: 218
            color: '#FFFF55'
          - value: 228
            color: '#68E143'
          - value: 252
            color: '#FFFF55'
          - value: 262
            color: '#EA3324'
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.utility_voltage
        unit: ''
        name: Utility Voltage (2 Weeks)
        icon: 'mdi:transmission-tower'
        show:
          fill: true
          legend: false
          labels: false
          name: true
          points: false
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
          show_legend: false
        font_size: 75
        line_width: 3
        points_per_hour: 4
        hours_to_show: 336
        lower_bound: 200
        upper_bound: 260
        decimals: 0
        color_thresholds_transition: hard
        color_thresholds:
          - value: 0
            color: '#EA3324'
          - value: 218
            color: '#FFFF55'
          - value: 228
            color: '#68E143'
          - value: 252
            color: '#FFFF55'
          - value: 262
            color: '#EA3324'
  - type: vertical-stack
    title: ''
    cards:
      - type: 'custom:canvas-gauge-card'
        card_height: 250
        entity: sensor.generator_voltage
        name: ''
        gauge:
          type: radial-gauge
          title: Generator
          width: 250
          height: 250
          minValue: 0
          maxValue: 280
          startAngle: 40
          ticksAngle: 280
          valueBox: true
          units: Vac
          majorTicks:
            - 0
            - 28
            - 56
            - 84
            - 112
            - 140
            - 168
            - 196
            - 224
            - 252
            - 280
          minorTicks: 10
          strokeTicks: true
          highlights:
            - from: 0
              to: 218
              color: 'rgba(234, 51, 36, .75)'
            - from: 218
              to: 228
              color: 'rgba(255, 255, 85, .75)'
            - from: 228
              to: 252
              color: 'rgba(104, 225, 67, .75)'
            - from: 252
              to: 262
              color: 'rgba(255, 255, 85, .75)'
            - from: 262
              to: 280
              color: 'rgba(234, 51, 36, .75)'
          borders: 'no'
          needleType: arrow
          needleWidth: 4
          needleCircleSize: 7
          needleCircleOuter: true
          needleCircleInner: false
          animationDuration: 1500
          animationRule: linear
          valueBoxBorderRadius: 10
          colorValueBoxRect: '#222'
          colorValueBoxRectEnd: '#333'
          valueDec: 0
          valueInt: 0
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.generator_voltage
        unit: ''
        name: Generator Voltage (24 Hr)
        icon: 'mdi:flash'
        show:
          fill: true
          legend: false
          labels: false
          name: true
          points: false
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
          show_legend: false
        font_size: 75
        line_width: 3
        points_per_hour: 4
        hours_to_show: 24
        lower_bound: 200
        upper_bound: 260
        decimals: 0
        color_thresholds_transition: hard
        color_thresholds:
          - value: 0
            color: '#EA3324'
          - value: 218
            color: '#FFFF55'
          - value: 228
            color: '#68E143'
          - value: 252
            color: '#FFFF55'
          - value: 262
            color: '#EA3324'
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.generator_voltage
        unit: ''
        name: Generator Voltage (2 Weeks)
        icon: 'mdi:flash'
        show:
          fill: true
          legend: false
          labels: false
          name: true
          points: false
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
          show_legend: false
        font_size: 75
        line_width: 3
        points_per_hour: 4
        hours_to_show: 336
        lower_bound: 200
        upper_bound: 260
        decimals: 0
        color_thresholds_transition: hard
        color_thresholds:
          - value: 0
            color: '#EA3324'
          - value: 218
            color: '#FFFF55'
          - value: 228
            color: '#68E143'
          - value: 252
            color: '#FFFF55'
          - value: 262
            color: '#EA3324'
  - type: vertical-stack
    title: ''
    cards:
      - type: 'custom:canvas-gauge-card'
        card_height: 250
        entity: sensor.generator_frequency
        name: ''
        gauge:
          type: radial-gauge
          title: Generator
          width: 250
          height: 250
          minValue: 0
          maxValue: 70
          startAngle: 40
          ticksAngle: 280
          valueBox: true
          units: Hz
          majorTicks:
            - 0
            - 10
            - 20
            - 30
            - 40
            - 50
            - 60
            - 70
          minorTicks: 10
          strokeTicks: true
          highlights:
            - from: 0
              to: 57
              color: 'rgba(234, 51, 36, .75)'
            - from: 57
              to: 58.5
              color: 'rgba(255, 255, 85, .75)'
            - from: 58.5
              to: 61.5
              color: 'rgba(104, 225, 67, .75)'
            - from: 61.5
              to: 63
              color: 'rgba(255, 255, 85, .75)'
            - from: 63
              to: 70
              color: 'rgba(234, 51, 36, .75)'
          borders: 'no'
          needleType: arrow
          needleWidth: 4
          needleCircleSize: 7
          needleCircleOuter: true
          needleCircleInner: false
          animationDuration: 1500
          animationRule: linear
          valueBoxBorderRadius: 10
          colorValueBoxRect: '#222'
          colorValueBoxRectEnd: '#333'
          valueDec: 0
          valueInt: 0
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.generator_frequency
        unit: ''
        name: Generator Frequency (24 Hr)
        icon: 'mdi:sine-wave'
        show:
          fill: true
          legend: false
          labels: false
          name: true
          points: false
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
          show_legend: false
        font_size: 75
        line_width: 3
        points_per_hour: 4
        hours_to_show: 24
        lower_bound: 55
        upper_bound: 65
        decimals: 1
        color_thresholds_transition: hard
        color_thresholds:
          - value: 0
            color: '#EA3324'
          - value: 57
            color: '#FFFF55'
          - value: 58.5
            color: '#68E143'
          - value: 61.5
            color: '#FFFF55'
          - value: 63
            color: '#EA3324'
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.generator_frequency
        unit: ''
        name: Generator Frequency (2 Weeks)
        icon: 'mdi:sine-wave'
        show:
          fill: true
          legend: false
          labels: false
          name: true
          points: false
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
          show_legend: false
        font_size: 75
        line_width: 3
        points_per_hour: 4
        hours_to_show: 336
        lower_bound: 55
        upper_bound: 65
        decimals: 1
        color_thresholds_transition: hard
        color_thresholds:
          - value: 0
            color: '#EA3324'
          - value: 57
            color: '#FFFF55'
          - value: 58.5
            color: '#68E143'
          - value: 61.5
            color: '#FFFF55'
          - value: 63
            color: '#EA3324'
  - type: vertical-stack
    title: ''
    cards:
      - type: 'custom:canvas-gauge-card'
        card_height: 250
        entity: sensor.tank_utility_002e001b3733373013473831
        name: ''
        gauge:
          type: radial-gauge
          title: Propane Tank
          width: 250
          height: 250
          minValue: 0
          maxValue: 100
          startAngle: 40
          ticksAngle: 280
          valueBox: true
          units: '%'
          majorTicks:
            - 0
            - 10
            - 20
            - 30
            - 40
            - 50
            - 60
            - 70
            - 80
            - 90
            - 100
          minorTicks: 10
          strokeTicks: true
          highlights:
            - from: 0
              to: 20
              color: 'rgba(234, 51, 36, .75)'
            - from: 20
              to: 30
              color: 'rgba(255, 255, 85, .75)'
            - from: 30
              to: 80
              color: 'rgba(104, 225, 67, .75)'
            - from: 80
              to: 100
              color: 'rgba(172, 235, 235, .75)'
          borders: 'no'
          needleType: arrow
          needleWidth: 4
          needleCircleSize: 7
          needleCircleOuter: true
          needleCircleInner: false
          animationDuration: 1500
          animationRule: linear
          valueBoxBorderRadius: 10
          colorValueBoxRect: '#222'
          colorValueBoxRectEnd: '#333'
          valueDec: 0
          valueInt: 0
      - type: 'custom:mini-graph-card'
        entities:
          - sensor.tank_utility_002e001b3733373013473831
        unit: ''
        name: Propane (2 Weeks)
        icon: 'mdi:propane-tank'
        show:
          fill: true
          legend: false
          labels: false
          name: true
          points: false
          extrema: true
          average: true
          name_adaptive_color: true
          icon_adaptive_color: true
          show_legend: false
        font_size: 75
        line_width: 3
        points_per_hour: 4
        hours_to_show: 336
        decimals: 1
        color_thresholds_transition: hard
        color_thresholds:
          - value: 0
            color: '#EA3324'
          - value: 20
            color: '#FFFF55'
          - value: 30
            color: '#68E143'
          - value: 80
            color: '#acebeb'
  - entities:
      - entity: binary_sensor.ping_rpigen
      - entity: binary_sensor.genmon_power_outage
        secondary_info: last-changed
      - entity: binary_sensor.genmon_update_available
      - entity: sensor.generator_time
    title: Generator
    type: entities
    state_color: true

interesting. I’ll give that a try. I assumed there was just a built in arrangement I was missing…

on a different note, what are you using to monitor your propane tank? Very interesting.

Tank Utility
https://tankutility.com/
I have had it for a few years now, and it is very handy.

I am in the same situation.

In column 1, there are five cards

column 2, 20 plus

column 3 & 4 2 cards each.

Is one of my cards causing this? no matter how much i arrange them up / down i still get this strange behaviour?