Probleme mit Grid

Dashboard/Cards/Frontend
1

Hallo Zusammen,

kann mich bitte mal jemand schubsen? Vorzugsweise in die richtige Richtung? :smiley:

Ich benötige 3 verschiedene Dashboards und möchte sie alle gleich aufbauen, aber mit unterschiedlichen Gewichtungen der angezeigten Elemente. Für die Gewichtung wollte ich einfach die jeweils relevanten Elemente größer anzeigen als die weniger relevanten.

Ich nehme dazu ein Grid mit 5 Spalten und möchte die Größe anpassen.
Nichts was ich versuche ändert auch nur einen Hauch an der Spaltenbreite…

 type: grid
 columns: 5
 grid_template_columns: 1fr 2fr 1fr 1fr 1fr
 cards:
   - type: "custom:button-card"
     entity: light.living_room

 type: grid
 columns: 5
 square: false
 cards:
   - type: "custom:button-card"
     entity: light.living_room
     grid_column: 1 / span 1

Egal was ich versuche, die Spalten bleiben immer genau gleich breit.
Was sehe ich nicht?

2

Hi,
ich denke nicht, dass die hauseigene Grid-Karte den Parameter grid_template_columns versteht. Zumindest sehe ich davon nichts in der offiziellen Doku.
Für grid_template_columns benötigst du die Layout-Card aus dem HACS (GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.)

3

Hallo Alex,

das habe ich ebenfalls versucht.
Es ist vollkommen egal, ob ich das installiert habe oder nicht.

Ich bekomme weder eine Fehlermeldung wenn es nicht installieret ist, noch ist das Ergebnis ein anderes, wenn ich es installiert habe.

Es ändert sich einfach überhaupt nichts… :frowning:

4

Ich habe die layout-card “deinstalliert” indem ich einfach ein Backup ohne sie wiederhergestellt habe.
Es ist ordnungsgemäß über HACS installiert, die JS-Datei ist integriert. Soweit gut.

Ich stelle ein Dahsboard aus grid (layout-card) und füge den Code ein:

grid-template-columns: 10 60% 30%
grid-template-rows: auto
grid-template-areas: |
  "header header header"
  "left center right
  "footer footer footer"

und bei den Karten, die ich auf dem Dashboard erstelle füge ich auch den entsprechenden Code aus der Doku ein:

view-layout:
  grid-area: left

Die Breite der Spalten wird übernommen, aber der Positionierung wird ignoriert. Im Dahsboard erscheine die Spalten einfach nach Reihenfolge von links nach rechts.

Kann mit jemand helfen, was ich falsch mache? Ich verzweifle langsam daran…

5

Hallo Jürgen,
ich denke du solltest view_layout: schreiben und nicht view-layout:
Zumindest habe ich das so bei mir eingetragen.

Gruß
Elmar

7

Hallo Elmar,

das war es für die Positionierung.
Danke für den Hinweis, ich wäre fast wahnsinnig geworden :smiley:

Was ein anderes Problem zu sein scheint sind die Zeilen.

grid-template-columns: 10% 60% 30%
grid-template-rows: auto
grid-template-areas: |
  "header header header"
  "left center right"
  "footer footer footer"

scheint nur 3 Zeilen zu nehmen, obwohl rows auf auto steht.

Wenn ich zwei unterschiedliche Karten z. B. mit

view_layout:
  grid-area: left

schreibe, dann überlagern sich die beiden Karten, statt eine von beiden in einer weiteren Zeile anzuzeigen.

8

Möglicherweise liegt es daran, dass du das %-Zeichen hinter der 10 vergessen hast.

9

Hi Alex,

danke für den Hinweis, das war ein Schreibfehler hier im Post; nicht auf der Karte, sry.

10

Mit dieser Cheat-Sheet habe ich es hinbekommen:

CSS Grid Layout Guide | CSS-Tricks

Der Trick war, die Zeile anzugeben. Immer. Alle zeilen zählen, also auch der Header in meinem Beispiel.

So würde es dann z. B. aussehen, wenn es in Zeile 2 anfängt und 3 Zeilen nach unten geht.

  grid-row:
    - 2 / span 3

Jetzt suche ich nur noch etwas, damit alle Cards in jeder Zeile immer die gesamte Zelle ausfüllen.

Die Argumente align und justify funktionieren leider nicht.