Grid Layout-Card Rows und Grid definieren

Dashboard/Cards/Frontend
,
1

Hallo Zusammen,

ich versuche mich gerade an einer Grid darstellung mittels Layout Card.
Mein Testgrid sieht wie folgt aus:

gridrows: auto
grid-template-columns: 30% 30% 30%
grid-template-rows: auto
grid-template-areas: |
  "Kopf1 Kopf2 Kopf3"
  "T1 T2 T3"
  "T4 T5 T6"
  "test test test"
  "big big big"

Hierzu hab ich ein paar Fragen.
Kann ich definieren wie hoch die rows sind, derzeit stehen sie bei mir ja auf Auto. Ich würde dies gern prozentual oder über Pixel machen z.B. Kopf 10% big 50%.

Kann ich eine Karte auch über Kopf1 und Kopf2 positionieren das diese Karte zwei Gridflächen einnimmt?

Danke euch Andi

2

Interessantes Thema, bei mir scheitert es schon daran, dass er mein costum:Layout-Card erkennt. Heißt immer custom does’t exist.
Hast die die aktuelle HA Version?

Gruß oekomat

3
  1. heißt es custom:layout-card
  2. Die Hacs-Integration hast du geladen?
4

wenn du eine Karte über 2 Grid-Flächen definieren willst musst du die beiden betreffenden Grid-Fächen nur gleich benennen.

grid-template-areas: | "Kopf1 Kopf1 Kopf3" "T1 T2 T3" "T4 T5 T6" "test test test" "big big big"

zume anderen …
die “rows” kannst du genauso wie die “columns” definieren …

hier ein Besipiel aus meinem Code:

      grid-template-columns: 355px 606px 355px
      grid-template-rows: auto 152px 152px 152px 152px auto
      grid-template-areas: |
        "He He He"
        "ML1 MM MR1"
        "ML2 MM MR2"
        "ML3 MM MR3"
        "ML4 MM MR4"
        "Pu Pu Pu"
        "Fo Fo Fo"
        "Fo1 Fo1 Fo1"
        "Fo2 Fo2 Fo2"
5

danke :slight_smile: funktioniert. Manchmal ist es einfacher als gedacht.