[GELOEST] Tabellen dynamisch strukturieren

[MQTT]

Hallo, ich bin neu im html Bereich und habe meine erste Intranet Seite gebaut.
Diese besteht nur aus Tabellen mit Live Werten.
Ich baue seit Jahren mit Node-Red und hatte den Wunsch eine eigene Seite zu bauen, ähnlich wie bei openWB 1.9 die Status Seite.
Wo ich alle mir wichtigen Live Werte auf einem Blick habe. Seit 2 Tagen bin ich dabei und es sieht so aus:


Frage 1: ich würde die Tabellen gern teils nebeneinander anordnen, wie kann ich das am einfachsten/elegantesten ?
Frage 2: wenn ich sie nebeneinander gebracht habe, kann ich dann zusätzlich einstellen, dass sie sich wieder (dynamisch) untereinander anordnen, wenn der Bildschirm zu klein wird ? (So wie es Node-Red macht)

 

[Sempervivum]

Für beide Aufgaben würde ich ein Gridlayout empfehlen, und zwar verschachtelt: Außen die Anordnung der einzelnen Gruppen und innen die Struktur mit Überschriften und Tabellen.
Hier kannst Du alles nachlesen:

A Complete Guide to CSS Grid | CSS-Tricks

Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

css-tricks.com

Und Du kannst die Anordnung von der Fensterbreite mit einer Mediaquery verändern, so wie Du es brauchst:

Responsive Web Design Media Queries

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Es geht allerdings mit Grid auch ohne Mediaquery.

 

[MQTT]

ich habe viele Tutorials gelesen und sehr viel probiert.
Das Ergebnis ist schon ganz gut, aber ganz verstanden habe ich es noch nicht.
Ich müsste mir die Linien anzeigen lassen, dann würde ich es vielleicht besser verstehen.

.grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(130px, 100%), 1fr));
            justify-items: center;
            align-items: center;
        }

        .grid-item {
            justify-self: start;
            align-self: center;
            text-align: center;
            border: lightgrey 1px solid;
            width: auto;
            height: auto;
        }

Den Code verwende ich für meine Tabellen.

Auf einem breiten Bildschirm sieht es so aus:


schiebe ich es dann langsam zusammen, sieht es irgendwann so aus:

ganz oben rechts fehlen die Einheiten und es gibt keinen vertikalen Abstand zwischen den Feldern.

Auf einem Mobiltelefon steht alles schön untereinander, aber ohne Abstand.
Bin für Tipps dankbar.

 

[Sempervivum]

Da bist Du ja schon ziemlich weit gekommen.

Ich müsste mir die Linien anzeigen lassen, dann würde ich es vielleicht besser verstehen.

Der Seiteninspektor zeigt dir die Linien automatisch an, siehe hier:

Arbeiten mit dem Seiteninspektor – SELFHTML-Wiki

wiki.selfhtml.org

Allerdings sieht das Bild für ein Grid merkwürdig aus, ich sehe da gar keine vertikale Ausrichtung.
Abstände kannst Du mit "gap" beim Grid-Container erzeugen.
Mit repeat, autofill und minmax hast Du eine sehr elegante Methode gefunden. Sie eignet sich besonders wenn man viel einheitliche Items anordnen will, wie bei einer Fotogalerie. In deinem Fall könnte es vielleicht besser sein, die Items manuell den Zellen zuzuweisen, so dass sich ein optimale Anordnung ergibt.
Wenn Du nicht zum Ziel kommst, würde es helfen, wenn Du es zum Test, nur des Layouts, auf einen öffentlichen Webspace stellen könntest und die URL posten. Die Messwerte sind ja in diesem Zusammenhang nicht so wichtig.
Alternativ das HTML und CSS posten.

 

[MQTT]

naja weit gekommen würde ich nicht sagen, eher viel c&p.

ich habe meine 6 Tabellen, die größte habe ich definiert (250x290px).

Nun möchte ich dass die 6 Tabellen (250x290px) gleichmäßig verteilt werden und dann automatisch in die nächste Zeile wandern und hier wieder gleichmäßig verteilt werden.
Leider kriege ich das nicht hin.

.grid-container {
    display: grid;
    grid-template-rows: repeat(auto-fit);
    grid-template-rows: repeat(auto-fit);
    grid-auto-flow: column;
    grid-gap: 4px 4px;
    background-color: darkkhaki;
}

.grid-item {
    background-color: darkgrey;
    border: lightgrey 1px solid;
    width: 250px;
    height: 290px;
}

mein erster Code von gestern zeigt mir beim Einblenden der Rasterlinien ein wildes Durcheinander an, da blicke ich gar nicht durch.

Mein jetziger Code bleibt einfach in einer Reihe stehen und öffnet keine neue Reihe bei Unterschreitung.

 

[msi]

mein erster Code von gestern zeigt mir beim Einblenden der Rasterlinien ein wildes Durcheinander an, da blicke ich gar nicht durch.

Das solltest du unbedingt üben, denn das ist ein elementares Werkzeug, ohne das man viele Probleme nur extrem schwer finden kann.

Hast du einen Link zu der Seite, damit man sich das ansehen kann?

 

[MQTT]

Bin der Sache nun näher gekommen mit:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-gap: 2px 2px;
}

.grid-item {
    border: lightgrey 1px solid;
}

Aber er verschachtelt die so komisch:


Wie kriege ich es hin, dass in der 1. Zeile niemals was frei bleibt?
Also erst Zeile 1 füllen, dann die nächste.

 

[MQTT]

Schau es dir gern an: becker8 punkt de - Port: sechzigtausend

 

[Sempervivum]

Die leeren Zellen kommen durch die leeren p-Elemente zu Stande, wenn Du die löschst, werden sie verschwinden.
Beim Gridlayout wird jedes Kind des Gridcontainers als Griditem aufgefasst, die Klasse "grid-item" ist nur zur Info oder als Hilfe beim Styling.

 

[tk1234]

Wie kriege ich es hin, dass in der 1. Zeile niemals was frei bleibt?

Was machen die leeren p-Elemente da? Jedes Kindelement von div.grid-container wird zu einem Block in dem Grid, auch leere Absätze … Die Klasse grid-item ist übrigens überflüssig, die divs lassen sich auch über ».grid-container > div« selektieren.

 

[MQTT]

Vielen Dank, an die <p> hatte ich nicht mehr gedacht, die hatte ich eingefügt lange bevor ich mit dem Grid angefangen habe.
Nun sieht es schon besser aus.
die items habe ich gelöscht.

Kann ich noch einstellen, dass die kleineren Tabellen nicht in die Länge gezogen werden sondern in original Größe verbleiben und dafür in ihrer Zelle zentriert werden?

edit gefunden:
justify-items: start; bzw. center.
align-items: start;

Könnt ihr mir noch sagen wo der Unterschied zwischen

grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));*/

und

grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

macht keinen Unterschied bei mir.

Was bedeuten die 100% / 1fr in dem Zusammenhang, also auf was beziehen die sich?

 

[Sempervivum]

Kann ich noch einstellen, dass die kleineren Tabellen nicht in die Länge gezogen werden sondern in original Größe verbleiben und dafür in ihrer Zelle zentriert werden?

Das kannst Du mit align-items und justify-items erreichen:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    grid-gap: 2px 2px;
    justify-items: center;
    align-items: center;
}

 

[MQTT]

Die KI erklärt mir:

Im ersten Fall, "grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))", wird die minimale Größe der Spalte auf 260px festgelegt, aber sie kann sich auch ausdehnen, um den verfügbaren Platz im Raster zu füllen.

Im zweiten Fall, "grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr))", wird die minimale Größe der Spalte auf 260px oder 100% des verfügbaren Platzes im Raster festgelegt, je nachdem, welche Größe größer ist. Dies ermöglicht es den Spalten, sich an verschiedene Bildschirmgrößen anzupassen, während sie gleichzeitig eine Mindestbreite von 260px beibehalten.

Insgesamt bieten beide Optionen Flexibilität bei der Anpassung von Spalten in einem Grid-Layout, aber der Unterschied liegt in der Art und Weise, wie die minimale Größe definiert wird.

versteh´ ich immer noch nicht und auf kleineren Bildschirmen sehe ich auch keinen Unterschied.