diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
index b0d3bfc3..f6f2e6a7 100644
--- a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
+++ b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
@@ -1,6 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, nothing, PropertyValues, TemplateResult } from "lit";
-import { customElement, query, state } from "lit/decorators.js";
+import { customElement, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import {
@@ -12,6 +12,7 @@ import {
     HomeAssistant,
     LovelaceCard,
     LovelaceCardEditor,
+    LovelaceLayoutOptions,
 } from "../../ha";
 import "../../shared/badge-icon";
 import "../../shared/button";
@@ -87,11 +88,13 @@ export class AlarmControlPanelCard
         return Boolean(this._config?.states?.length);
     }
 
-    public getGridSize() {
+    public getLayoutOptions(): LovelaceLayoutOptions {
+        const options = super.getLayoutOptions();
         if (this._config?.show_keypad) {
-            return [4, 1] as [number, number];
+            delete options.grid_columns;
+            delete options.grid_rows;
         }
-        return super.getGridSize();
+        return options;
     }
 
     @query("#alarmCode") private _input?: HaTextField;
diff --git a/src/cards/template-card/template-card.ts b/src/cards/template-card/template-card.ts
index c5274a0f..3bb9c2c6 100644
--- a/src/cards/template-card/template-card.ts
+++ b/src/cards/template-card/template-card.ts
@@ -12,6 +12,7 @@ import {
     HomeAssistant,
     LovelaceCard,
     LovelaceCardEditor,
+    LovelaceLayoutOptions,
     RenderTemplateResult,
     subscribeRenderTemplate,
 } from "../../ha";
@@ -82,20 +83,26 @@ export class TemplateCard extends MushroomBaseElement implements LovelaceCard {
         return height;
     }
 
-    public getGridSize(): [number, number] {
-        this._inGrid = true;
-        let column = 2;
-        let row = 1;
-        if (!this._config) return [column, row];
+    // For backward compatibility
+    public getGridSize(): [number | undefined, number | undefined] {
+        const { grid_columns, grid_rows } = this.getLayoutOptions();
+        return [grid_columns, grid_rows];
+    }
 
+    public getLayoutOptions(): LovelaceLayoutOptions {
+        const options = {
+            grid_columns: 2,
+            grid_rows: 1,
+        };
+        if (!this._config) return options;
         const appearance = computeAppearance(this._config);
         if (appearance.layout === "vertical") {
-            row += 1;
+            options.grid_rows += 1;
         }
         if (appearance.layout === "horizontal") {
-            column = 4;
+            options.grid_columns = 4;
         }
-        return [column, row];
+        return options;
     }
 
     setConfig(config: TemplateCardConfig): void {
diff --git a/src/ha/data/lovelace.ts b/src/ha/data/lovelace.ts
index a9ee7a4b..03cf0779 100644
--- a/src/ha/data/lovelace.ts
+++ b/src/ha/data/lovelace.ts
@@ -113,6 +113,11 @@ export interface LovelaceCardConfig {
     [key: string]: any;
 }
 
+export interface LovelaceLayoutOptions {
+    grid_columns?: number;
+    grid_rows?: number;
+}
+
 export interface ToggleActionConfig extends BaseActionConfig {
     action: "toggle";
 }
diff --git a/src/utils/base-card.ts b/src/utils/base-card.ts
index 982a8534..3cd2aa38 100644
--- a/src/utils/base-card.ts
+++ b/src/utils/base-card.ts
@@ -2,7 +2,14 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { html, nothing, TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { computeRTL, computeStateDisplay, HomeAssistant, isActive, isAvailable } from "../ha";
+import {
+    computeRTL,
+    computeStateDisplay,
+    HomeAssistant,
+    isActive,
+    isAvailable,
+    LovelaceLayoutOptions,
+} from "../ha";
 import setupCustomlocalize from "../localize";
 import "../shared/badge-icon";
 import "../shared/card";
@@ -54,26 +61,10 @@ export class MushroomBaseCard<
         };
     }
 
-    public getGridSize(): [number, number] {
-        this._inGrid = true;
-        let column = 2;
-        let row = 1;
-        if (!this._config) return [column, row];
-        const appearance = computeAppearance(this._config);
-        if (appearance.layout === "vertical") {
-            row += 1;
-        }
-        if (appearance.layout === "horizontal") {
-            column = 4;
-        }
-        if (
-            appearance?.layout !== "horizontal" &&
-            this.hasControls &&
-            !("collapsible_controls" in this._config && this._config?.collapsible_controls)
-        ) {
-            row += 1;
-        }
-        return [column, row];
+    // For backward compatibility
+    public getGridSize(): [number | undefined, number | undefined] {
+        const { grid_columns, grid_rows } = this.getLayoutOptions();
+        return [grid_columns, grid_rows];
     }
 
     public getCardSize(): number | Promise<number> {
@@ -93,6 +84,25 @@ export class MushroomBaseCard<
         return height;
     }
 
+    public getLayoutOptions(): LovelaceLayoutOptions {
+        const options = {
+            grid_columns: 2,
+            grid_rows: 1,
+        };
+        if (!this._config) return options;
+        const appearance = computeAppearance(this._config);
+        if (appearance.layout === "vertical") {
+            options.grid_rows += 1;
+        }
+        if (appearance.layout === "horizontal") {
+            options.grid_columns = 4;
+        }
+        if (appearance?.layout !== "horizontal" && this.hasControls) {
+            options.grid_rows += 1;
+        }
+        return options;
+    }
+
     protected renderPicture(picture: string): TemplateResult {
         return html`
             <mushroom-shape-avatar