Warum erzeugt grid-template-columns vertikalen Whitespace?

[Esther]

Hallo an alle!

Ok, habe den Code in question unten angehängt.

Aus irgendeinem Grund wird in <main> vertikaler Whitespace eingefügt... (in z.B. den Chrome Dev Tools gut erkennbar als schräge unterbrochene dunkle violette Linien auf violettem Untergrund).

Entfernt man grid-template-columns, so ist auch dieser Whitespace passé.

...das wirkt zwar hier lächerlich - je mehr Content main > section sieht, desto mehr wächst auch dieser Whitespace - bis der footer unnötigerweise vertikal von der Seite geschoben wird und main > section einsam und verlassen die Seite okkupiert.

Wie entferne ich diesen Whitespace, hilfe, hilfe, HILFE.

(Die Tabelle[n] in main > section stellen in diesem Fall übrigens tatsächlich tabular darzustellenden Inhalt dar und sind NICHT Designzwecken geschuldet, sollte sich das jemand hier fragen)

VIELEN LIEBE DANK EUCH!

Der Code:

	/* CSS */
	* {
		margin: 0;
		padding: 0;
	}
	#container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
	}
	main {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	main section {
		width: 100%;
		display: grid;
		justify-items: center;
		align-items: start;
		grid-template-columns: repeat(auto-fit, minmax(40ch,1fr)); /* Ich verursache Whitespace und freue mich DIEBISCH darüber. */
	}

<!-- HTML -->
<div id="container">
	<header>
		<nav><ul><li>My NavBar</li></ul></nav>
	</header>
	<main>
		<section>
			<table>
				<thead><tr><th colspan="2"></th>HEADLINE!</tr></thead>
				<tbody><tr><td>This is data</td><td>This is data</td></tr></tbody>
			</table>
			<!-- Other data in other tables... -->
		</section>
	</main>
	<footer>
		<p>This is my footer</p>
	</footer>
</div>

[Rolf B]

Hallo Esther,

<thead><tr><th colspan="2"></th>HEADLINE!</tr></thead>

Dies ist auf jeden Fall verkehrt, ein <tr> Element darf keinen Text außerhalb von th oder td enthalten.

Aber warum Whitespace entsteht, ist mir auch noch nicht klar. Der Browser zieht den HEADLINE! Text vor die Table. Ich habe das mal im Quelltext getan und ein div drumherum gelegt - irgendwo entstehen da offenbar Text-Margins, die man nicht erwartet. Das müsste ich noch genauer untersuchen.

Das bringt aber nur dann was, wenn man das auf Basis von validem HTML und CSS untersucht, das zumindest die Element dorthin bringt, wo Du sie haben willst.

Rolf

[Rolf B]

Hallo Rolf,

so, Update.

Du hast da eine dreifache Schachtelung von Layouts.

#container    - flexbox
   main       - flexbox
      section - grid
         table

Soweit ich das nachstellen konnte, berechnet die #container-Flexbox die Höhe, die sie für das main-Element benötigt, auf Grund des Inhaltes von <main>. Aber: Ohne zu beachten, dass die Section darin ein Grid ist. Deswegen wird das main-Element zu hoch berechnet, wenn das Grid mehr als die Table enthält. Dein "HEADLINE!" war falsch platziert und wurde deshalb vom Browser als Textelement vor die Table gezogen, damit ergaben sich zwei Grid-Items. Die Höhe von main ist korrekt, wenn die Section kein Grid ist. Durch das Grid kommen Text und Table nebeneinander, die benötigte Höhe sinkt, und damit ist der Inhalt der Section nun zu klein für's main Element.

Wenn man dem #container die Flexbox wegnimmt, stimmen die Höhe von main und section wieder überein. Das erkennt man gut, wenn man den beiden eine border gibt.

Das ist in Firefox und Chrome so, deswegen dürfte das "by design" sein und kein Browserbug. Vermutlich aus Performance-Gründen.

Gerade noch entdeckt: Wenn Du dem #container das Flex-Wrapping wegnimmst (brauchst Du das?), funktioniert die Größenberechnung korrekt!

@Gunnar Bittersmann - was ist das für ein merkwürdiger Zusammenhang?

Rolf

[Esther]

Danke danke danke Danke!

Verstehen tu ich das ja immer noch nicht ganz, da das flex-wrap sich ja auf flex-direction: COLUMN bezieht (daher ja in HORIZONTALER Ebene? neuem Platz schaffen sollte), aber ohne flex-wrap funktioniert es tatsächlich. Werde das schnell und vor allem LEISE so umsetzen, bevor es sich das W3C anders überlegt.

Cheers!

---

Dies ist auf jeden Fall verkehrt, ein <tr> Element darf keinen Text außerhalb von th oder td enthalten.

Sorry typo. Aber gleich noch ein Problem meines Quellcodes ausgemerzt 😀

[ottogal]

Hallo Esther, hallo Rolf,

ich habe auch etwas herumprobiert ( https://codepen.io/ottogal/pen/VwMVdeW ) und beobachtet, dass offenbar der Minimalwert 40ch zu groß ist und so den Abstand vergrößert.

Was ich aber gar nicht verstehe, wieso das nur zwischen den ersten beiden Tabellen passiert...

Viele Grüße ottogal

[ottogal]

Sorry Esther et al.,

ich habe euch in die Irre geführt, weil ich beim Herumspielen eine Variante über das verlinkte Codepen gespeichert habe (mit grid-template-rows und auto-fill).
Habe es jetzt wieder zurückgesetzt auf die Ausgangssituation mit grid-template-columns und auto-fit). Nochmal der Link:
https://codepen.io/ottogal/pen/VwMVdeW

[Rolf B]

Hallo Esther,

flex-direction:column bedeutet, dass die Flexbox-Elemente untereinander angeordnet werden. flex-wrap:wrap bewirkt, dass bei nicht ausreichendem vertikalen Platz mehrere Spalten gebildet werden.

Angemerkt: Für flex-direction + flex-wrap gibt es eine Kombinationseigenschaft: flex-flow. Man kann z.B. flex-flow: row wrap; schreiben, wenn man eine zeilenweise angeordnete Flexbox mit Umbruch haben will.

Ein Umbruch kann bei Dir aber gar nicht passieren, denn dein #container ist nicht in der Höhe limitiert. Und wenn Browser von einem genug haben, dann ist es Höhe.

Ich vermute, dass die Existenz von wrap den Browser auf die Idee bringt: „Ey, isch hab doch Platz OHNE Ende, wieso soll isch da denn zu genau auf die Höhe in der Secktschen glotzn“. Ich mutmaße, dass die Flexbox-Spec das in gewählteren Worten ähnlich vermittelt, aber das müsste ich mir erstmal genauer durchlesen. Und viele Specs sind wie Gesetze - sie sind auf viele Bücher verteilt und erst in ihrem Zusammenwirken enthüllt sich der volle Wahnsinn, der darin steckt.

Vielleicht weiß Gunnar das ja aus dem Kopf heraus.

Rolf