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