Layout of cards

Configuration
1

Im trying to get 6 picture-entity cards displayed on a tablet.

Im after a group of 4 and then 2 next to them, all on the same line/row, Ive been trying to do this with Custom:layout-card, horizontal-stack and vertical-stack with no joy. Im now wondering if its possible

09
09756Ɨ586 333 Bytes

I will be displaying other cards below this but have been concentrating on the first line/row first.

Any help please.

1 Like
2

Possible with the layout-card.

Show us your attempts.

3

I donā€™t have all my attempts as I was reading, adding and modifying things all afternoon so didnā€™t record any of it but the general structure any my thinking was:

I imagined the layout as:

1    2
           5    6
3    4

then worked on configuring the cards 1, 2, 3, and 4 into a cube style which work but just couldnā€™t get 5 and 6 along side.

the last attempted looked like this:

views:
  - title: testing
    panel: true
    cards:
      - type: custom:layout-card
        layout: vertical
        cards:
          - type: horizontal-stack
            cards:
              - type: picture-entity
                card name 1
              - type: picture-entity
                card name 2
          - type: vertical-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: picture-entity
                    card name 3
                  - type: picture-entity
                    card name 4
              - type: custom:layout-card
                layout: horizontal
                cards:
                  - type: picture-entity
                    card name 5
                  - type: picture-entity
                    card name 6

Ive not included any data to keep things small here, the first 4 cards as in the lines above produce the ā€˜cubeā€™ effect im after but canā€™t get 5 and 6 along side.

Thanks in advance.

4

Iā€™m using the break option for this, but there are multiple ways.
With every ā€˜breakā€™ it jumps to the next column.

views:
  - title: testing
    panel: true
    cards:

      - type: custom:layout-card
        layout: vertical
        max_columns: 3
        cards:

          - type: horizontal-stack
            cards:
              - type: picture-entity
                card name 1
              - type: picture-entity
                card name 2

          - type: horizontal-stack
            cards:
              - type: picture-entity
                card name 3
              - type: picture-entity
                card name 4

          - break

          - type: picture-entity
            card name 5

          - break

          - type: picture-entity
            card name 6
5

Thank you @VDRainer, at some point yesterday I did try a break line, will have another look though. thanks again.

6

That worked, I was reading up on the layout card, horizontal and vertical stacking but still couldnā€™t get my head around it. Thats great, cheers.