Also, was ist mit Gittersystemen los? Ich meine Flexbox ist hier . Es ist bereit, die Browser sind (mehr oder weniger) bereit. Es ist Zeit. Wir können alles ohne CSS-Transformations-Hacks vertikal und horizontal zentrieren!

Plus, es gibt all die anderen Sachen, die Flexbox machen kann. Machen wir uns nichts vor. Wir haben lange auf dieses zentrierende Ding gewartet.

Vielleicht hast du den Brillanten beobachtet Was zur Flexbox ?! , Serie, und du bist bereit zu gehen. Wenn Sie das nicht gesehen haben, sollten Sie.

Also ... werfen wir jetzt Gittersysteme ab? Nun, in vielerlei Hinsicht könnten wir. Vor allem, wenn du Klassensuppe so sehr hasst wie ich. Flexbox-basierte Grid-Systeme sind jedoch bereits eine Sache, und sie können immer noch nützlich sein.

Zum Beispiel könnten sie Ihnen helfen, bei einer CSS-Methode wie Objektorientiertes CSS oder BEM . Vielleicht magst du die Klassen einfach. Oder Sie gewöhnen sich gerade an Flexbox, und das alte Raster mit zwölf Spalten würde Ihnen helfen, sich anzupassen.

Vielleicht ist es schneller, ein vordefiniertes System zu verwenden, als jedes Flexbox-Grid, das Sie benötigen, individuell zu codieren.

Was auch immer die Gründe sind, Gittersysteme gehen nicht weg; und Sie können das Beste aus beiden Welten haben. Also warum solltest du nicht?

Die "großen zwei"

Ich wäre nachlässig, wenn ich das nicht erwähnen würde Grundstein 6 ist out, und es hat eine Flexbox-Version seines Rasters als eine Option. Dito das noch zu veröffentlichen Bootstrap 4 .

Sie behalten die alten Grids für die Leute bei, die weniger kompatible Browser unterstützen müssen, aber sie sind bereit, den Switch zu machen.

Flexbox-Gitter

Dieses passend benannte Grid-System hält sich an die alten zwölf Säulen. Es verfügt über die ganze Vertrautheit von 960.gs, allen erweiterten Layout-Funktionen von Flexbox sowie den reaktionsschnellen Klassen (extra klein, klein, mittel und groß), die wir erwarten.

Gelöst von Flexbox

Gelöst von Flexbox wurde im Grunde als Demo gemacht. Dennoch ist es eine ziemlich vollständige und funktionale Demo, die als Grundlage für viele Projekte dienen könnte.

Gridlex

Gridlex erfüllt seinen Slogan "Just a Flexbox Grid System". Es gibt nicht viel zu unterscheiden von Flexbox Grid. Wählen Sie die mit den besseren Klassennamen, denke ich.

sGrid

sGrid ist ein bisschen anders. Insbesondere ist es mit Stylus gebaut. Ich weiß es schon gut? Ich dachte, wir würden jetzt alle nur mit SASS arbeiten. Wie auch immer, es ist auch so konzipiert, dass es in eine Reihe von anderen Technologien integriert werden kann: Meteor, Grunt, React und NPM.

scss-flex-gitter & sass-flex-mixin

Oh, wir gehen. scss-flex-Gitter und Sass-Flex-Mixin sind zwei separate SASS-basierte Flexbox-Grids. Sie können entweder aus ihrem Repository klonen oder scss-flex-grid über NPM installieren.

Fazit

Die Werkzeuge sind da draußen. Bis jetzt war ich nicht in der Lage, einen "Fan-Favoriten" zu identifizieren. Die Chancen stehen gut, dass die Leute zum größten Teil nur das verwenden, was mit ihren bevorzugten CSS-Frameworks geliefert wird.

Auf jeden Fall gibt es wenig Entschuldigung, nicht mehr in Flexbox stecken zu bleiben.