Add advanced yaml only row_span option for sections (#21833)

home-assistant · Sep 3, 2024 · 2c975d4 · 2c975d4
1 parent ab53493
commit 2c975d4
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/src/data/lovelace/config/section.ts b/src/data/lovelace/config/section.ts
@@ -6,6 +6,7 @@ export interface LovelaceBaseSectionConfig {
   title?: string;
   visibility?: Condition[];
   column_span?: number;
+  row_span?: number;
 }
 
 export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig {

diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
@@ -166,13 +166,16 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
                 maxColumnCount
               );
 
+              const rowSpan = sectionConfig?.row_span || 1;
+
               (section as any).itemPath = [idx];
 
               return html`
                 <div
                   class="section"
                   style=${styleMap({
                     "--column-span": columnSpan,
+                    "--row-span": rowSpan,
                   })}
                 >
                     ${
@@ -332,6 +335,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       .section {
         border-radius: var(--ha-card-border-radius, 12px);
         grid-column: span var(--column-span);
+        grid-row: span var(--row-span);
       }
 
       .section:has(hui-section[hidden]) {