请问Button card里怎么可以把几个卡片垂直平均排列

stone360

如图，3个卡片分别是bar1，bar2，bar3，但是我们怎么调整，他们之间的行距都没有变化，请大神帮我看看代码应该怎么调整？

          - type: custom:button-card
            show_icon: false
            show_name: false
            show_state: false
            show_label: false
            name: 信息统计菜单栏
            style:
              top: 10%
              left: 27%
            styles:
              grid:
                - grid-template-areas: |
                    "bar1"
                    "bar2"
                    "bar3"
                - grid-template-columns: 5px
                - grid-templat-rows: 40px 40px 40px
              card:
                - width: 80px
                - height: 150px
                - background-color: transparent
            custom_fields:
              bar1:
                card:
                  type: custom:button-card
                  entity: sensor.all_lights_num
                  layout: icon_name
                  show_icon: true
                  show_name: false
                  show_state: true
                  icon: mdi:lightbulb-group
                  name: 开灯数量
                  styles:
                    icon:
                      - margin-top: ‘0px'
                      - margin-left: '0px'
                      - width: '50px'
                      - color: white
                    state:
                      - margin-top: '-23px'
                      - margin-left: 15px
                      - font-size: 15px
                    card:
                      - background-color: rgba(0,0,0,0.3)
                      - width: 80px
                      - height: 40px
                      - border-radius: 40px
              bar2:
                card:
                  type: custom:button-card
                  entity: sensor.all_fans_num
                  layout: icon_name
                  show_icon: true
                  show_name: false
                  show_state: true
                  icon: mdi:fan
                  name: 风扇数量
                  styles:
                    icon:
                      - margin-top: ‘0px'
                      - margin-left: '0px'
                      - width: '50px'
                      - color: white
                    state:
                      - margin-top: '-23px'
                      - margin-left: 15px
                      - font-size: 15px
                    card:
                      - background-color: rgba(0,0,0,0.3)
                      - width: 80px
                      - height: 40px
                      - border-radius: 40px
              bar3:
                card:
                  type: custom:button-card
                  entity: sensor.all_climate_num
                  layout: icon_name
                  show_icon: true
                  show_name: false
                  show_state: true
                  icon: mdi:air-conditioner
                  name: 空调数量

                  styles:
                    icon:
                      - margin-top: ‘0px'
                      - margin-left: '0px'
                      - width: '50px'
                      - color: white
                    state:
                      - margin-top: '-23px'
                      - margin-left: 15px
                      - font-size: 15px
                    card:
                      - background-color: rgba(0,0,0,0.3)
                      - width: 80px
                      - height: 40px
                      - border-radius: 40px

复制代码

hungheo

- grid-template-rows: 40px 40px 40px
楼主的代码这一行template少了一个e

stone360

hungheo 发表于 2025-5-30 19:36
- grid-template-rows: 40px 40px 40px
楼主的代码这一行template少了一个e

非常感谢，终于发现问题了