Javascript "switch/case" Problem

[Rolf B]

Hallo akuep,

für forumlesbares CSS schreibt man auf eine Zeile ~~~css, dann auf die folgenden Zeilen das CSS Beispiel, dahinter auf eine neue Zeile ~~~. Dann formatiert das Forum das richtig.

Ich habe geschrieben: HTML und CSS. CSS alleine ist wenig hilfreich.

Aber ich kann es soweit erklären: Grid funktioniert so, dass es HTML Elemente in die Grid-Zellen positioniert. Dabei wird für diese Zellen eventuell auch eine Größe festgelegt.

Am Grid-Element (also das Element, wo display:grid steht), kann man die Eigenschaften justify-items für die Inline-Ausrichtung (bei uns: horizontal) und align-items für die Block-Ausrichtung (bei uns: vertikal) verwenden. Diese Eigenschaften tun selbst nichts, sondern geben für die Grid-Items (also die Elemente, die vom Grid platziert werden), den Anfangswert für justify-self und align-self vor.

DIESE Eigenschaften legen fest, ob sich ein Element in Inline- oder Blockrichtung an der Startposition (bei uns: links bzw. oben), an der Endposition (rechts/unten) oder mittig ausrichtet, oder ob es seine Größe so anpasst, dass es die Grid-Zelle füllt. Letzteres wird durch den Wert "stretch" erreicht und der ist sogar der Standardwert.

Deswegen fragte ich nach deinem HTML. Sind die div oder die output-Elemente die Grid-Items? Ich nehme an: die divs. Damit werden die divs auf die Größe der Grid-Zelle aufgezogen und du hast nun zwei Möglichkeiten:

• Rechtsbündigkeit für das div festlegen (wie das geht, hat Gunnar verlinkt), dann wird das output-Element nicht in seiner Größe verändert, aber im div rechtsbündig angeordnet.
• oder: dem output-Element eine Breite von 100% geben, damit es die Breite des div annimmt, und dem output-Element dann die Rechtsbündigkeit zuweisen.

Was davon besser ist, hängt von deinem Umfeld ab.

Die dritte Möglichkeit kann sein, die divs rauszuschmeißen und die Formatierung nur für die output-Elemente zu machen. Ob das geht, hängt von deinen Formatierungsvorstellungen ab. Du kannst dann mit align-items:center eine vertikale Zentrierung in den Grid-Zellen erreichen (so wie Du es im Moment mit align-content:center im div machst), und mit justify-content:end rechtsbündigkeit bekommen. Allerdings für alle Grid-Items. Wenn Du es nur für die output-Elemente haben willst, musst Du denen entweder justify-self:end mitgeben oder sie beim Default stretch belassen und die von Gunnar genannte Rechtsbündigkeit angeben.

Vermutlich hast Du schon einiges selbst ausprobiert und es hat nicht funktioniert. Problem bei solchen Formatierungsthemen ist oft, dass die Elemente nicht die Größe haben, wie man es denkt. Entweder kann man ihnen dann mit der outline-Eigenschaft (analog zu border) einen Markierungsrahmen geben oder ihre Abmessungen mit einer Hintergrundfarbe sichtbar machen. Oder man guckt in den Entwicklerwerkzeugen per Inspektor nach, welche Größe sie haben. Einfach im Inspektor die Maus über das Element halten, der Browser hebt es dann auf der Seite hervor.

Bei allem Wunsch nach Lesbarkeit solltest Du aber trotzdem versuchen, nicht zu viel zu schreiben. Wenn Du 18 Output-Klassen hast und überall 8 Eigenschaften notierst, dann verlierst Du den Überblick und wirst wahnsinnig, wenn Du etwas ändern musst. Wenn gleichartige Elemente gleichartig formatiert werden müssen, sollten sie auch eine gleichartige Klasse bekommen - soferrn überhaupt nötig. Wenn dein Grid nur output-Elemente einer Art hat, kannst Du auch mit dem Nachfahrenselektor alle output-Elemente auf einmal formatieren:

#grid output {
	padding: 0.5em 0em 0.5em 3.0em;
	background:#417db750;
	border: 1px solid #0386BA;
	align-content:center;
}

Die Verwendung von Sammeleigenschaften wie border spart ebenfalls viel Schreibarbeit. Es ist ein Irrtum, dass "viel schreiben" leichtere Verständlichkeit bewirkt. Für mich ist "viel schreiben" vor allem unübersichtlich und änderungsfeindlich.

Explizite Positionsangaben im Grid sind übrigens oftmals entbehrlich. Wenn ich ein Grid mit 3 Spalten und 5 Zeilen habe und 15 Elemente zeilenweise darin verteilen will, dann kann ich diese 15 Elemente einfach hintereinander ins HTML schreiben und CSS verteilt sie automatisch auf die Zellen.

Rolf