Flexbox-Grid

[marctrix]

Hej alle,

ich habe mich mal an einem einfachen Flexbox-Grid versucht. Der Weg scheint der richtige für moderne Webseiten, fast alles ist deutlich einfacher, als mit anderen Methoden, vieles nur mit flexbox überhaupt erst möglich.

Dennoch gibt es ein unschönes Problem.

In einem 980px breiten div möchte ich ein bis zwölf Spalten anzeigen lassen. Das scheint zu klappen.

Ich gebe dazu einem div eine Klasse mit dem Namen col, damit er eine Spalte "normaler" Breite bildet.

Soll ein div über zwei solcher Grid-Spalten gehen, nehme ich als flexbasis den doppelten Wert und lasse es auch doppelt so "schnell" wachsen.

Das führt zu dem erwarteten Ergebnis, dass Spalten mit colspan-2 genau doppelt so breit sind, wie die normalen Spalten. Damit das funktioniert habe ich von der verfügbaren Breite (980px) die gaps abgezogen (12 x 16px) und den Rest durch 12 geteilt - alles in

em 

freilich.

Klappt so lange ich nicht verschieden breite Spalten miteinander kombiniere (z. B. colspan-4 und colspan-8) - diese sind minimal versetzt/nicht bündig.

Also habe ich irgendwo einen ziemlich doofen Denkfehler, den ich einfach nicht finde?

Ein Code-Beispiel

Marc