Use right grid column count inside grid section (#21819)

This commit is contained in:
Paul Bottein 2024-08-28 14:53:29 +02:00 committed by GitHub
parent 9568677926
commit 8b5f731d0c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -176,7 +176,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
haStyle, haStyle,
css` css`
:host { :host {
--column-count: 4; --base-column-count: 4;
--row-gap: var(--ha-section-grid-row-gap, 8px); --row-gap: var(--ha-section-grid-row-gap, 8px);
--column-gap: var(--ha-section-grid-column-gap, 8px); --column-gap: var(--ha-section-grid-column-gap, 8px);
--row-height: var(--ha-section-grid-row-height, 56px); --row-height: var(--ha-section-grid-row-height, 56px);
@ -186,7 +186,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
} }
.container { .container {
--grid-column-count: calc( --grid-column-count: calc(
var(--column-count) * var(--column-span, 1) var(--base-column-count) * var(--column-span, 1)
); );
display: grid; display: grid;
grid-template-columns: repeat( grid-template-columns: repeat(
@ -234,7 +234,7 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
position: relative; position: relative;
grid-row: span var(--row-size, 1); grid-row: span var(--row-size, 1);
grid-column: span min(var(--column-size, 1), var(--column-count)); grid-column: span min(var(--column-size, 1), var(--grid-column-count));
} }
.card.fit-rows { .card.fit-rows {