Hi,
ich bin gerade dabei, mein Dashboard neu aufzubauen. Dazu schaue ich mir verschiedene YT-Videos an 
Die Rede ist immer vom HACS Addon layout-card.
Macht diese noch Sinn? Ich habe die mal installiert, konnte aber keinen Unterschied zum Standardlayout feststellen.
Entweder mache ich noch was verkehrt oder wurden diese Funktionen bereits im StandardDashboard mit integriert?
Gruß
Hermann
Ich nutze die z.b. für verschiedene Dashboard Layouts (vertical etc.)
und ohne würde es nicht gehen?
Nicht dass ich wüsste, probier es aus.
Wenn du keine Verwendung für die Layout-Card hast, brauchst du sie natürlich auch nicht.
Der große Vorteil der layout-card ist, dass diese voll CSS Grid -fähig ist.
Du kannst dir bei einem beliebigen Online Grid Generator dein Wunsch-Layout basteln und den generierten Code dann in die Karte übernehmen, wenn du das Layout ‘Grid’ wählst.
Da würde ich gerne mehr zu erfahren… Hast Du noch ein paar Tipps zum Thema?
Ich verwende gerne https://grid.layoutit.com/
Hier ein Beispiel-Layout:
Den relevanten CSS-Code im rechten Fenster kannst du dann in die Layout-card übernehmen (ohne Semikolon), wodurch das Layout übernommen wird. Dabei ist es egal, ob du die Breiten und Höhen in fr, px oder % angibst.
Die Karten, die du dann da rein haust, kannst du dann der area zuweisen, wo sie dargestellt werden soll. Hier im Beispiel 4 mal dieselbe history-graph-Karte:
Das ganze kannst du auch auf ein ganzes Dashboard anwenden, wenn du bei Ansichtsart ‘Grid’ nimmst:
Bei denen war ich auch schon auf der Seite, wusste aber nicht, wie ich es dann umsetze…
Sehr cool, hatte ich überhaupt nicht auf dem Schirm. Würdest Du bitte den relevanten Code posten.
Ist im Screenshot rot unterlegt
Und mühselig abzutippen… 
Bitte für den ganzen Code für die history-graph-Karte. Wäre ein toller Ausgangspunkt.
Bitteschön:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 33% 33% 33%
grid-template-rows: 1fr 1fr 1fr
gap: 0px 0px
grid-template-areas: |
"area-1 area-1 area-1"
"area-2 area-2 area-4"
"area-3 area-3 area-4"
cards:
- type: history-graph
entities:
- sun.sun
view_layout:
grid-area: area-1
Warum blos hast du das nicht schon vor nem Jahr gepostet … das vereinfacht ja vieles immens. Das ist ja ein unsägliches Gewürge wenn man es von Hand macht.
1000 Dank.
Danke Dir, dass muss ich mir mal genauer ansehen…
Au weia, dass gibt viel Arbeit. Ich werde wohl einiges umgestalten müssen… 
Das ist genau, was HA noch gefehlt hat. SUPER!
Hi Alex,
grundsätzlich KLASSE, aber wie bekomme ich den Rand weg?
grid-template-columns: 0.7fr 1.3fr 1.3fr 0.7fr
grid-template-rows: 1.8fr
gap: 0px 0px
grid-template-areas: |
"area-1 area-2 area-3 area-4"
Sonst muss ich ja alles auf dem TAB auf layout-card umstellen…
by HarryP: Zusammenführung Doppelpost
Angeblich soll das mit
layout:
margin: 0
card_margin: 0
funktionieren, tut es bei mir aber nicht.
Ich habe in der yaml-Datei meines Themes die Zeile
masonry-view-card-margin: 2px 2px
angepasst, damit diese Abstände kleiner werden.
Leider bei mir auch nicht. Mist, muss ich wohl wieder rauswerfen. Wäre aber Klasse gewesen.
Ich habe das mit CARD_MOD hingepfuscht, leider nicht so elegant, dafür aber keinen Rand links/rechts.
Alex Ich habe eine Lösung gefunden!!!
grid-template-columns: 0.7fr 1.3fr 1.3fr 0.7fr
grid-template-rows: auto
grid-template-areas: |
"area-1 area-2 area-3 area-4"
margin: "-4px -4px 0px -4px"
Muss noch ein wenig damit rumspielen, aber der leere Platz rechts/links ist weg!!!
Nutze auch gerne layout card. Damit kann man dann auch super verschiedene layouts für verschiedene Endgeräte gestalten (tablet, pc und handy)
views:
- path: default_view
icon: mdi:home-circle-outline
type: custom:grid-layout
layout:
grid-gap: 0.5em
grid-template-columns: 33% 33% 33%
grid-template-rows: auto auto auto auto
grid-template-areas: |
"titleBar titleBar titleBar"
"row1 row2 row3"
"row4 row5 row6"
mediaquery:
'(max-width: 600px)':
grid-gap: 0em
grid-template-columns: 1% 98% 1%
grid-template-rows: auto
grid-template-areas: |
". titleBar ."
". row3 ."
". row1 ."
". row2 ."
". row4 ."
". row5 ."
". row6 ."
"footer footer footer"
'(max-width: 1200px)':
grid-gap: 0.5em
grid-template-columns: 50% 50%
grid-template-rows: auto auto auto auto
grid-template-areas: |
"titleBar titleBar"
"row1 row3"
"row2 row4"
"row5 row6"
badges: []
cards:
Frage an die erfahreneren User hier: wo liegen die Unterschiede von Layout-card zu Bootstrap-Grid-Card … gäbe es Gründe für Umstieg u./o. parallele Nutzung (sofern überhaupt möglich/sinnvoll)?
Kann ich Dir nicht sagen, habe gleich mit der LAYOUT-CARD angefangen, die andere ist mir bisher nicht bekannt. Ich mag aber die Tools die thomasloven (Thomas Lovén) · GitHub zur Verfügung stellt, die haben immer Hand & Fuß.
Bootstrap arbeitet mit vorgegeben Klassen, Bei der layout card ist man noch ein bisschen flexibler würde ich behaupten. Letztendlich muss man sich in beiden einarbeiten aber man kommt mit beiden zum Ziel. Denke bootstrap ist für Webentwickler interessanter da viele die Library kennen bzw. damit arbeiten.
@RobertoCravallo @ciddi89 Danke für das Feedback … ich schau mir dann mal Layout-card näher an