Frage zum Wiki-Artikel „Flexbox“

[Bubi]

also im CSS sieht mein Grid so aus:

.grid-container {
			display: grid;
			grid-template-columns: 1fr 5fr 1fr;
			padding: 1px;
		}
		.grid-item {
			padding: 1px;
			text-align: center;
		}

im HTML dann so:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>
<div class="grid-container">
  <div class="grid-item">4</div>

bis hier hin klappt es wie ich es will, aber ab item 5 dann nicht mehr. da haut es mir das item nach ganz rechts.

Muss ich einen .grid-container_2 {} einsetzen? Laut w3schools sollte er das sogar alles automatsich machen, ohne dass ich den grid zwischendrin schließe, aber das tut er nicht.