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>