From faca62b55fbac5b7e20a42f983fa86def21a0cf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Mon, 26 Jul 2021 14:43:14 +0200
Subject: [PATCH] Avoid gaps in grid card with conditional (#9507)

* Avoid gaps in grid card with conditional. Fix #9433

* Rename hidden parameter

* Restore devcontainer.json

* Fix accidental change

* Update src/panels/lovelace/cards/hui-grid-card.ts

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Prettier

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/lovelace/cards/hui-grid-card.ts             | 10 +++++++++-
 src/panels/lovelace/components/hui-conditional-base.ts |  3 +++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts
index 504d8e1a0c..05d1836a71 100644
--- a/src/panels/lovelace/cards/hui-grid-card.ts
+++ b/src/panels/lovelace/cards/hui-grid-card.ts
@@ -87,10 +87,18 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
           grid-column: 1 / 1;
         }
 
-        :host([square]) #root > *:first-child {
+        :host([square]) #root > *:not([hidden]) {
           grid-row: 1 / 1;
           grid-column: 1 / 1;
         }
+        :host([square]) #root > *:not([hidden]) ~ *:not([hidden]) {
+          /*
+	       * Remove grid-row and grid-column from every element that comes after
+	       * the first not-hidden element
+	       */
+          grid-row: unset;
+          grid-column: unset;
+        }
       `,
     ];
   }
diff --git a/src/panels/lovelace/components/hui-conditional-base.ts b/src/panels/lovelace/components/hui-conditional-base.ts
index 876707cce0..9142ba758b 100644
--- a/src/panels/lovelace/components/hui-conditional-base.ts
+++ b/src/panels/lovelace/components/hui-conditional-base.ts
@@ -17,6 +17,8 @@ export class HuiConditionalBase extends ReactiveElement {
 
   @property() protected _config?: ConditionalCardConfig | ConditionalRowConfig;
 
+  @property({ type: Boolean, reflect: true }) public hidden = false;
+
   protected _element?: LovelaceCard | LovelaceRow;
 
   protected createRenderRoot() {
@@ -55,6 +57,7 @@ export class HuiConditionalBase extends ReactiveElement {
 
     const visible =
       this.editMode || checkConditionsMet(this._config.conditions, this.hass);
+    this.hidden = !visible;
 
     this.style.setProperty("display", visible ? "" : "none");