Gestaltung mit Flexbox

[marctrix]

Hej Henry,

Ab da haben wir wohl aneinander vorbei geredet. Wie auch immer. Deine Behauptung, man kann ohne Grid alles machen, was mit Grid geht, stimmt so nicht.

Habe ich so nicht gesagt, sondern

...mir fällt kein Szenario ein, bei dem ich standard-gridlayout nicht klassisch hinbekomme…

Betonung auf Mir und Standard

Ich bezog mich auf diese Aussage:

Dass etwas ohne Grid nicht gehen soll, glaube ich niemals, […]

Aber zurück zum Thema:

Umso mehr interessiert mich ja ein Vergleich.

Dann schlag ein konkretes Szenario vor (eines haben wir ja nun hinreichend durchexerziert).

Auch wenn man dieselbe Optik mit Klimmzügen hinbekommen mag, sind dann doch mehr oder weniger viele und umfangreiche Hacks und überflüssige Elemente im HTML nötig.

Bei mir weder Hacks, noch überflüssige Elemente aber dafür robust und global einsetzbar.

float beispielsweise dient dazu, den Inhalt eines Elementes um ein anderes fließen zu lassen. Wenn man es benutzt, um Spalten zu erzeugen, ist das ein Hack.

Mit nur zwei Zeilen CSS erzeugt man ein zweispaltiges Layout:

display: grid;
grid-template-columns: 1fr 1fr;

Lassen wir mal außen vor, dass du meinst, grid sei überflüssig, weil man mit den veralteten umständlichen Hacks alles machen kann, was mit Grid geht. Mit welcher Technik außer Grid sind zwei Spalten leichter zu erzeugen?

Kommt ja auf den Rest an, aber je nach Zweck und Elementenzuordnung würde ich zunächst mal entweder:

display:inline-block;
width:50%;

oder

display:table-cell;
width:50%;

oder so ähnlich versuchen.

Das sollte beides gehen. In der Realität kommen dann aber noch ein paar Anforderungen hinzu: z.B. Abstände zwischen den Elementen (grid-gap) und die Forderung dass das bündig sein soll mit Elementen in einem vierspaltigen Fußbereich.

Außerdem brauchst du Innenabstände. Dann kommst du mit 50% schon nicht hin. Oder du brauchst box-sizing: border-box und zack: schon hast du ein mehrfaches von dem Code, den du gezeigt hast.

Jetzt muss man schon ziemlich viel testen, messen usw, bis das passt.

Ich habe so was lange genug machen müssen. 😉

Und selbst das ist ja nur ein Bruchteil der Anforderungen.

Schau dir doch mal an, wie viel Code Frameworks wie Bootstrap für ein zwölfspaltiges Grid-System benötigen!

Mit css Grid definiert man 12 Spalten so:

display: grid;
grid-template-columns: repeat(12, 1fr);
grid-gap: 1em;

Und schon kannst du loslegen, Elemente über mehrere Zeilen und Spalten auf diesem Grid zu platzieren.

Grid ist einfach. Nicht nur für mich als Entwickler.

Bestreitet ja keiner, aber meine Vorgehensweise auch und dazu noch Browserkompatibel(die angeblichen ca. 3% vom IE11 dürften eher ca. 6% betragen, und das ist dann doch nicht so wenig)

Aber nochmal, ich will hier bestimmt nicht Grid schlecht reden, denn ich war schon immer ein Fan vom allseits gehassten Tabellenlayout und im Grunde ist Grid ja nichts anderes, wenn auch in einer von Html getrennten und moderneren Form.

Jein, wenn du in Tabellen noch colspan und rowspan verwendest. Es ist aber deutlich komplizierter und automatisches auffüllen von Lücken (dense), beliebiges anordnen (order) mehrere Elemente auf einem Raster-Feld stapeln sind nur drei von ganz, ganz vielen Dingen, die mit den von dir genanten Vorschlägen nicht umsetzbar sind.

Im HTML benötigst du noch ansonsten überflüssige Elemente für die Zeilen. Mit CSS grid nicht. Und mach mal ein Tabellen-Layout responsiv. Alles machbar (mit nem halben Dutzend media queries) — aber der Aufwand! Und nicht nur für die Umsetzung, auch für Tests!

Dazu kommt, dass Änderungen am Layout im Projektverlauf in meinem Arbeitsalltag mitunter dazu geführt haben, dass es mit float oder display: block nicht mehr ging und ich das Layout damit begonnen hatte. Dann musste ich praktisch von vorn anfangen z.B. mit display: table um nun rowspan verwenden können. Das heißt: selbst wenn das Ergebnis im Endeffekt mal ähnlich schnell umsetzbar ist, wie mit Grid: der Weg dahin kann deutlich länger gewesen sein. Das sieht man dem fertigen Produkt freilich nicht an. Egal welche Änderungswünsche an einem Grid-Layout im Nachhinein oder während der Entwicklungsphase vorgenommen werden sollen: das kann man mit überschaubaren Aufwand machen. Sogar wenn sich so grundlegende Dinge ändern wie die Idee nun plötzlich 13 statt 12 Rasterspalten zu verwenden. Mach das mal mit Bootstrap! 😂

Und woher weißt du, dass der IE 11 nicht 3% Marktanteil hat, sondern 6%? Warum nicht 1,5% Wo machst du das dran fest?

Aber egal wo der im Moment steht. Die Tendenz ist ganz eindeutig fallend!

Ein Argument, was ich oft höre als jemand der barrierefrei arbeiten muss: ein Blindenarbeitsplatz ist so teuer, dass der viele Jahre halten muss. Daher setezn Blinde oft alte Browser ein. Nicht weil sie wollen, sondern weil sie keine Wahl haben.

Aber Blinden ist die optische Anordnung auf einem Bildschirm nun mal gerade so was von piepe 😉

Marc