Grid: Automatische Anordnung der Elemente in einem bestimmten Bereich

[marctrix]

Hej alle,

ich nutze konsequent die Möglichkeiten von grid und flex zur Vermeidung von media-queries. Zur Veranschaulichung: @Gunnar Bittersmann hat mal einen Pen dazu erstellt.

Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können. Da ich nicht weiß, wie viel größer der Abstand drum rum ist, kann ich auch kein padding benutzen — padding: auto wäre cool, gibt es aber nicht. Ich könnte die Elemente zentriert anordnen, aber das würde ja nur dazu führen, dass immer mehr in eine Reihe gesetzt werden, wenn die vorhanden sind, bis die Reihe voll ist…

Die Breite des Fensters mit JS abfragen ist oll — das muss ja ständig aktualisiert werden, wenn jemand das Fenster skaliert…

Hat jemand eine Idee?

HTML sollte möglichst so aussehen:

<container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  […]
<container>

Marc

[Gunnar Bittersmann]

@@marctrix

Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können.

Klar geht das ohne. max-width: 64em fürs Grid, bei Bedarf noch margin-left: auto; margin-right: auto.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können.

Klar geht das ohne. max-width: 64em fürs Grid, bei Bedarf noch margin-left: auto; margin-right: auto.

Da fehlte noch eine Info: der container soll sich über die ganze Breite des Elternelementes erstrecken. Bin eben selber drauf gekommen (manchmal sieht man den Wald vor lauter Bäumen nicht).

Ich war schon so nah dran mit padding: auto…

Hier die Lösung:

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

Menno - noch nicht genug Kaffee heute morgen?!?

Marc

[marctrix]

Hej marctrix,

@@Gunnar Bittersmann

Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können.

Klar geht das ohne. max-width: 64em fürs Grid, bei Bedarf noch margin-left: auto; margin-right: auto.

Da fehlte noch eine Info: der container soll sich über die ganze Breite des Elternelementes erstrecken.

Soll aussehen wie z.B. der header hier, nur eben ohne den zusätzlichen div.content…

Marc

[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 🖖

[marctrix]

Hej Gunnar,

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.

Sehr gut.

[Nur] dass ich den horizontalen Versatz auf Seiten mit bzw. ohne Scrollbar wegbekommen habe:

Darüber hatte ich mir nicht einmal Gedanken gemacht. Sehr feine Lösung!

Merci!

Marc

[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. 😉

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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.

Ja, das macht es. ☞ Testseite

100vw ist richtig; 100% ist falsch.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@Gunnar Bittersmann

Ja, das macht es. ☞ Testseite

Im FF uinter MacOS sehe ich keinen…

Marc

[Gunnar Bittersmann]

@@marctrix

Im FF uinter MacOS sehe ich keinen [Unterschied]

Lass mich raten: im Safari unter MacOS auch nicht. Im Chrome unter MacOS auch nicht.

Wie breit macht sich denn der Scrollbalken unter MacOS so? 😄 (in der Standard-Voreinstellung)

Das kannste aber ändern: Systemeinstellungen → Allgemein:

Dann siehste auch unter MacOS den Unterschied.

LLAP 🖖

[marctrix]

Hej Gunnar,

@@marctrix

Im FF uinter MacOS sehe ich keinen [Unterschied]

Lass mich raten: im Safari unter MacOS auch nicht. Im Chrome unter MacOS auch nicht.

Jetzt bin ich verwirrt. Ich sehe es — habe aber noch nichts umgestellt…

Vielleicht war es vorher doch der Safari?!?

Marc