Seeking example showing grid layout of tile cards that use decluttering and auto-entities

kbrown01 · March 17, 2026, 11:14pm

Before anyone says anything, I have tried 1000 different ways and I believe it is impossible. So I merely ask an example showing me how you achieve this.

Mind you, this is very much like the new “default” dashboard. Except I find the layout impossible to replicate.

What do I want?

Use auto-entities to get the list of targeted entities
Throw cards (mushroom or even tile) for this entities into a grid
That grid needs to flex … based on the view. Phone/tab/computer.

I can do it without decluttering, but decluttering is so easy to use.

If I create the entire layout by hand (no decluttering, no auto-entities) works a charm. If I involve the other components I get some weird cards that are half width, nothing makes sense.

Does anyone have a simple example showing auto-entities generating tile cards laid out in a flex grid that accommodates screen size?

Note, my first thought was I’ll just take over and look at the YAML for the new dashboard. I note that is missing? I wonder why?

Is there some “secret” to creating this style of layout?

kbrown01 · March 18, 2026, 9:06pm

This seems fairly simple to me. Essentially I am asking this:

“How is this layout achieved in YAML with cards?”

If the powers cannot provide the YAML for this, I do not understand?
What flexible grid magic did you use to yield six cards in this grid that flex’s perfectly? (Again) Is this some secret?

Or is this some effect from using:

a) auto-entities to determine the entities
b) the template in auto-entities generates cards that are decluttering templates
c) the templates render the cards

It seems to me that the grid layout (which “defaults” to 4) cannot in this mode be overcome. It must be the default is used and auto-entities and decuttering fill them. As opposed to all the cards are created and placed into the grid and it responds.

I cannot EVER get more than four columns. Five if sidebar is collapsed.
The above screenshot shows six … could be more depending on my screen. But four or five is it (weird that you can specify up to 10) … worthless.

Example (trying to cut it back):

How do I get 8 columns across in the grid?

decluttering_templates:
  shroom_group:
    card:
      type: tile
      entity: '[[group]]'
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      state_content:
        - state
        - brightness
      vertical: true
      features_position: bottom
views:
  - title: Rio Crest
    type: sections
    max_columns: 8
    sections:
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
      - type: custom:decluttering-card
        template: shroom_group
        variables:
          - group: group.doglights
        column_span: 1
    cards: []
    dense_section_placement: false

Which yields:

How does one get up to 8 columns depending on device? (Shrinking the included card with card-mod just makes the card smaller in the grid and does not allow more cards). I believe it is not possible to have more than 5, 4 if sidebar is open no matter what settings are applied. Which means the slider in the dashboard of type sections should allow for 1,2,3,4,5 columns … there is no such thing as 6,7,8,9,10.

From documentation:

Under Max number of sections wide, select the maximum number of columns you want to see in the new sections view.

Choosing anything over 5 is worthless.

Proof:

Select 4:

Select 5:

Select 6:

Select 8:

Nothing more than 5 actually works.
Changing the width of the card in the section using card-mod does nothing to change the column widths, it only changes the size of the card in the column.

So, I can only conclude it is impossible to create anything greater then 4/5 columns wide.

I can get a perfect layout without decluttering, not with it:

decluttering_templates:
  shroom_group:
    card:
      type: tile
      square: true
      entity: '[[group]]'
      tap_action:
        action: toggle
      hold_action:
        action: none
      double_tap_action:
        action: none
      state_content:
        - state
        - brightness
      vertical: true
      features_position: bottom
views:
  - title: Rio Crest
    type: sections
    max_columns: 8
    sections:
      - type: grid
        cards:
          - type: custom:decluttering-card
            template: shroom_group
            variables:
              - group: group.doglights
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
          - type: tile
            square: true
            entity: group.doglights
            tap_action:
              action: toggle
            hold_action:
              action: none
            double_tap_action:
              action: none
            state_content:
              - state
              - brightness
            vertical: true
            features_position: bottom
        column_span: 8
    cards: []
    dense_section_placement: false

The yellow is the EXACT card as the rest, only created by decluttering … the rest work perfect. The decluttering card is wrong.

removing decluttering (in this case) and auto-entities with decluttering is not really a viable option.