Cards unterschiedlicher Höhe in einer hbox

Begonnen von nglsr, 05 Januar 2018, 15:40:38

Vorheriges Thema - Nächstes Thema

nglsr

Hi,

ich habe mir ein Layout ausgedacht, bei dem ich gerne die Etagen untereinander und die Räume einer Etage ineinander haben möchte.
Dafür habe ich ganz außen eine vbox, in der die Etagen sind. Dadrin befinden sich mehrere hboxen (eine pro Etage) und dadrin befinden sich die cards (eine pro Raum). Das ganze wird soweit auch so angeordnet, wie ich das gerne hätte. Mein Problem ist aber, dass die Cards nicht die gleiche Höhe haben. Zum Beispiel der Flur unten hat momentan nur die Deckenlampe (Dimmer Widget+Label), das Wohnzimmer daneben hat unter anderem ein Thermostat (Thermostat Widget+2 Symbol Widgets dadrüber). Letzteres verbraucht natürlich mehr Platz und lässt die Card in die Höhe wachsen. Das würde mich jetzt auch noch gar nicht stören, wenn der Flur direkt daneben mitwachsen würde. Angehängt habe ich mal einen Screenshot von den beiden Räumen.

Ich hab zwar schon einige CSS-Klassen ausprobiert, momentan benutze ich aber nur hbox, vbox und grow-2 auf dem Screenshot:
        <div class="vbox">
            <div class="hbox">
                <div class="card">
                    <header>Flur</header>
                    <div class="vbox">
                        <div data-type="dimmer"
                            data-device="Licht_Flur"
                            data-get-on="dim [0-9]{1,3}|on"
                            data-set-on="on-for-timer 300"
                            data-dim="dim"
                            data-max="99"
                            data-min="2"></div>
                        <div data-type="label">Deckenlampe</div>
                    </div>
                </div>
                <div class="card grow-2">
                    <header>Wohnzimmer</header>
                    <div class="hbox">
                        <div class="vbox">
                            <div data-type="dimmer"
                                data-device="HUEDevice1"
                                data-get-on="!off"
                                data-set-on="on"
                                data-dim="pct"></div>
                            <div data-type="label">Stehlampe</div>
                        </div>
                        <div class="vbox">
                            <div data-type="symbol"
                                data-device="Heizung_WZ"
                                data-get="batteryLevel"
                                data-states='["3.[0-9]","2.[987]","2.[654]","2.[321]","((2.0)|([01].[0-9]))"]'
                                data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
                                data-colors='["green","yellow","orange","red","red"]'></div>
                            <div data-type="thermostat" data-device="Heizung_WZ_Clima"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>