From d26f1fa371c53ab6dcf59b738ca358b98cb22dab Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 29 Oct 2020 14:21:49 +0100
Subject: [PATCH] Fix grid card size when square (#7520)

---
 src/panels/lovelace/cards/hui-grid-card.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts
index 03f06998c2..d4914780ce 100644
--- a/src/panels/lovelace/cards/hui-grid-card.ts
+++ b/src/panels/lovelace/cards/hui-grid-card.ts
@@ -11,6 +11,11 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
       return 0;
     }
 
+    if (this.square) {
+      // When we're square, each row is size 2.
+      return (this._cards.length / this.columns) * 2;
+    }
+
     const promises: Array<Promise<number> | number> = [];
 
     for (const element of this._cards) {
@@ -25,13 +30,17 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
   }
 
   get columns() {
-    return this._config!.columns || DEFAULT_COLUMNS;
+    return this._config?.columns || DEFAULT_COLUMNS;
+  }
+
+  get square() {
+    return this._config?.square !== false;
   }
 
   setConfig(config: GridCardConfig) {
     super.setConfig(config);
     this.style.setProperty("--grid-card-column-count", String(this.columns));
-    this.toggleAttribute("square", config.square !== false);
+    this.toggleAttribute("square", this.square);
   }
 
   static get styles(): CSSResult[] {