Grid: Automatische Anordnung der Elemente in einem bestimmten Bereich

[Gunnar Bittersmann]

@@marctrix

padding: 1em calc(50% - 32em)

Das würde ich anders schreiben. Die 64em Maximalbreite kommen bei dir im Code nicht vor; und warum 50%, weißt du in zwei Wochen womöglich auch schon nicht mehr.

Gesprächigerer Code:

padding: 1em calc((100% - 64em) / 2)

Bei einem laufenden Projekt hab ich das auch so in der Art gemacht, nur dass anstatt 64em eine komplexere Berechnung dasteht, weil sich die Schriftgröße fließend mit der Viewportbreite ändert.

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

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

Die Breite der Scrollbar wird mit JavaScript ermittelt:

function adjustCenteredContent()
{
	document.documentElement.style.setProperty(
		'--scrollbar-width',
		`${window.innerWidth - document.documentElement.clientWidth}px`
	);
}

window.addEventListener('load', adjustCenteredContent);
window.addEventListener('resize', adjustCenteredContent);

LLAP 🖖