1.7 KiB
title, sidebar_label, description
| title | sidebar_label | description |
|---|---|---|
| Grid Card | Grid | The Grid card allows you to show multiple cards in a grid. |
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.
To add the Grid card to your user interface, click the Lovelace menu (three dots at the top right of the screen) and then Edit Dashboard. Click the plus button in the bottom right corner and select Grid Card from the card picker.
{% configuration %} type: required: true description: grid type: string title: required: false description: Title of Grid type: string square: required: false description: Should the cards be shown square. type: boolean default: true columns: required: false description: Number of columns in the grid. type: integer default: 3 cards: required: true description: List of cards. type: list {% endconfiguration %}
Examples
Alternatively, the card can be configured using YAML:
Basic example:
type: grid
cards:
- type: picture-entity
entity: camera.demo_camera
show_info: false
- type: entities
entities:
- binary_sensor.movement_backyard
Defining columns and disabling the square option:
type: grid
title: Backyard
columns: 2
square: false
cards:
- type: picture-entity
entity: group.all_lights
image: /local/house.png
- type: horizontal-stack
cards:
- type: picture-entity
entity: light.ceiling_lights
image: /local/bed_1.png
- type: picture-entity
entity: light.bed_light
image: /local/bed_2.png