CSS Unregelmäßige Reihen, Reihe von 8, Reihe von 8, wiederholt

Question

Ich würde gerne eine Reihe von unregelmäßigen Reihen von Boxen mit VW und VH-Einheiten machen.

Ich möchte eine Reihe von 8 Boxen gefolgt von einer Reihe von 7 Boxen, gefolgt von einer Reihe von 7 Boxen, etc, für eine beliebige Anzahl von Boxen. Ich denke, das sollte mit N-Kind möglich sein, aber ich kann nicht sehen, um es zu verwalten.

Hier ist, was ich habe

https://jsfiddle.net/kjLt55ne/

der Lage zu tun, ich sollte

.box:nth-child(9), .box:nth-child(24n+24) {margin-left: 5.7vw; background-color: red;} 
.box:nth-child(16n) {background-color:green; clear: left;} 

In der Theorie so weit gekommen:

• Set klar: rechts an jedem 16. Element
• setze margin-left auf jedes 16. Element ab 9

Dies funktioniert jedoch nicht ganz. Kann mir jemand helfen, das für eine beliebige Anzahl von Elementen zu lösen?

Answer 1

Ich habe es fast sofort nach dem Stellen der Frage ausgearbeitet!

.hex:nth-child(16) {clear: left; background-color: red;} 
.hex:nth-child(15n+16) {clear: left; background-color: red;} 
.hex:nth-child(9) {margin-left: 5.7vw;} 
.hex:nth-child(15n+9) {margin-left: 5.7vw;}