Grid Card

The Grid card allows you to show multiple cards in a grid. It will first fill the columns, automatically adding new rows as needed.

Screenshot of the grid card Screenshot of the Grid card.

To add the Grid card to your user interface, click the menu (three dots at the top right of the screen) and then Edit Dashboard. Click the “Add Card” button in the bottom right corner and select Grid Card from the card picker.

Configuration Variables

type string Required


title string (Optional)

Title of grid.

square boolean (Optional, default: true)

Should the cards be shown square.

columns integer (Optional, default: 3)

Number of columns in the grid.

cards list Required

List of cards.


Alternatively, the card can be configured using YAML:

Basic example:

type: grid
  - type: picture-entity
    entity: camera.demo_camera
    show_info: false
  - type: entities
      - binary_sensor.movement_backyard

Defining columns and disabling the square option:

type: grid
title: Backyard
columns: 2
square: false
  - type: picture-entity
    entity: group.all_lights
    image:  /local/house.png
  - type: horizontal-stack
      - type: picture-entity
        entity: light.ceiling_lights
        image: /local/bed_1.png
      - type: picture-entity
        entity: light.bed_light
        image: /local/bed_2.png