Grid: Automatische Anordnung der Elemente in einem bestimmten Bereich

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Und dass ich den horizontalen Versatz auf Seiten mit bzw. ohne Scrollbar wegbekommen habe:

Oops, im Projekt habe ich 100vw, nicht 100% zu stehen:

padding-left: calc((100vw - 64em) / 2);
padding-right: calc((100vw - 64em) / 2);
padding-right: calc((100vw - 64em) / 2 - var(--scrollbar-width, 0px));

Möglich, dass das hier einen Unterschied macht. Müsste ich mal testen.

Die Breite der Scrollbar wird mit JavaScript ermittelt:

		`${window.innerWidth - document.documentElement.clientWidth}px`

Das wirft in alten Browsern natürlich einen Syntaxfehler. Man könnte auch

		(window.innerWidth - document.documentElement.clientWidth) + 'px'

dafür schreiben, was den Code aber nicht besser lesbar macht. Das wird ja auch nur für moderne Browswer benötigt, die auch mit custom properties umgehen können. Also das Script für alte Browser gar nicht erst einbinden:

	<script>
		if (window.CSS && 'supports' in CSS)
 		{
			document.write('<script defer="" src="/path/to/modern.js"></script' + '>');
		}
	</script>

LLAP 🖖

PS: Hab mit Erschrecken festgestellt, dass ich die modern.js zwar erstellt, aber gar nicht eingebunden hatte. Gut, dass wir drüber gesprochen haben. 😉