Grid - Spaltenbreiten limitieren

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich könnte natürlich auch für die Ultrabreit-Darstellung (ab 2×30em+gap) eine @media-Query machen.

So würde ich’s wohl machen.

Oder auch nicht.

Dann hätte ich eine magic number drin, gefällt mir nicht.

So magisch ist die Zahl gar nicht. Mit CSS-Präprozessor kann man die Berechnung im Code haben (Beispiel 1):

.container {
	$max-right-column-width: 30em;
	$gap: 1em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: $gap;
	
	@media (width >= 2 * $max-right-column-width + $gap) {
		grid-template-columns: 1fr $max-right-column-width;
	}
}

margin-block für body hast du genullt? Ansonsten würde der auch noch in die Berechnung einfließen.

Wenn man keinen CSS-Präprozessor verwendet, rechnet man den Wert selbst aus und schreibt die Rechenformel dafür an Ort und Stelle in einen Kommentar – dann ist Zahl auch nicht mehr magisch.

---

Es geht aber auch ganz ohne Rechnerei. Man wählt als Breakpoint einen Wert, der ungefähr beim Doppelten der Maximalbreite der rechten Spalte liegt (Beispiel 2):

.container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em;
	
	@media (width >= 62em) {
		grid-template-columns: 1fr 30em;
	}
}

Damit ist sichergestellt, dass das Layout bei allen (größeren^[1]) Vieportbreiten vernünftig aussieht. Das ist, was Nutzer erwarten.

Beim Auf- und Zuziehen des Fensters können die Spaltenbreiten geringfügig springen, aber das ist völlig egal! Der einzige, der das Fenster auf- und zuzieht, ist der Webentwickler.

Jolan tru

---

1. Die Einspaltigkeit bei schmalen Viewports haben wir ja schon abgefrühstückt. ↩︎