From 79eaadda4b7722eb95e1add04b88256ea7c86d66 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Fri, 30 Oct 2020 00:12:16 +0100 Subject: [PATCH] Add grid card docs (#15460) Co-authored-by: Sean Mooney --- source/_lovelace/grid-markdown | 72 ++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 source/_lovelace/grid-markdown diff --git a/source/_lovelace/grid-markdown b/source/_lovelace/grid-markdown new file mode 100644 index 00000000000..3a0c4361353 --- /dev/null +++ b/source/_lovelace/grid-markdown @@ -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 +```