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");