Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 72 additions & 0 deletions source/_lovelace/grid-markdown
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
---
title: "Grid Card"
sidebar_label: Grid Card
description: "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.

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:

```yaml
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:

```yaml
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
```