Flexbox oder Grid-Layout

  • Hallo Rinaldo,


    meist arbeite ich mit einem CMS, und da ist es oft am besten, anstatt gegen vorhandene Formatierungen anzukämpfen, darauf aufzubauen. Insofern müsste man sagen, das was jeweils am besten passt, bzw. das was am besten mit bereits vorhandenen Formatierungen zusammenarbeitet. Erstelle ich ein Design von Grund auf, und ja das ist inzwischen eher altmodisch, verwende ich meistens das gute alte Prinzip „Float nearly everything“. Das finde ich einfach für mich am einfachsten und am flexibelsten. Ist aber denke ich vor allem Gewohnheit.


    Beste Grüße


    Gerhard

  • Der Hinweis auf CMS hat aber keinen Bezug zu flexbox oder grid-Layout oder versteh ich da was falsch?!

    Das CMS nutzt ja auch i.d.R. Templates - hier könnte man dann die Technik dahinter sehen.


    Aber so wie ich das bis jetzt in anderen (Fach)Foren / Medien gelesen habe, sollte man aktuell auf grid-Layout bauen.

  • Ich fand es eigentlich immer sehr angenehm, wenn Boxen sich selbst Platz verschaffen bzw. andere Boxen wegschieben, nach Frames und Tabellen fühlte sich das sowas von besser an. Ein „starres“ Grid-Layout geht ja schon fast wieder in Richtung der Tabellen, hat aber dabei den großen Vorteil, dass sich Inhalte leichter unabhängig von ihrer tatsächlichen Reihenfolge im Dokument anzeigen und formatieren lassen.


    Beim neuen Design des Traumprojekts habe ich beispielsweise damit gekämpft, die Breadcrumb-Navigation nicht oberhalb lose im Raum stehen zu lassen, sondern in den Inhaltsbereich zu verschieben. Wer sich den Quelltext dazu anschaut, erkennt, dass es mir nicht mit reiner Formatierung gelungen ist, sondern ich leicht zerknirscht die Reihenfolge im Template anpassen musste.


    Klar, man könnte jetzt natürlich die Templates und die zugehörigen Stylesheets über Bord werfen, und ganz von Null mit dem perfekten oder gerade bevorzugten System neu anfangen, aber das macht dann nicht nur einmal, sondern bei jedem Update, richtig viel Arbeit für Umsetzung und Funktionstest.


    Das wird sich vermutlich niemand freiwillig antun...

  • Grid-Layout geht doch den modernen Weg Richtung responsive Webdesign. Einen Vergleich zu Frame- oder Tabellen-Layout würde ich vermeiden.

    Zumindest denke ich, wer sich bemüht, diese Technik einzusetzen, der nutzt dann auch Breakpoints und Media Queries.

  • Hallo Andy,
    ich versuche es immer nach dem Motto: Mache es so einfach wie möglich. Wenn ich mit float nicht weiter komme, setze ich flexbox ein, insbesondere wenn ein fixer border Wert mit Breitenangaben in Prozent kombiniert werden soll.
    Aus meiner Sicht kommt es immer auf die Komplexität des Layouts an. In diesem Sinne kann sich der Einsatz von Grid-Layouts lohnen. Jedoch gehen mir die Grids zu sehr in Richtung alter Tabellenstrukturen, da man die Positionierung im Raster über grid-column-start, end und grid-row-start, end steuern muss. Ansich eine nette Sache, erfordert aber dass man immer die Struktur vor Augen haben muss und für neue Elemente diese ergänzen muss.

  • Die Struktur vor Augen haben: Das ist doch das, was heutzutage wichtig ist beim Design.


    Der Inhalt steht über allem - und dank neuer Webtechnologien kann man die Inhalte für die verschiedenen Endgeräte perfekt präsentieren und gewisse Bereiche einfach für z.B. Mobiltelefone ausblenden.


    Ich denke, die neuen Techniken sollte man nicht mit Tabellen-Design von früher vergleichen - das war schließlich einfach nur falsch und wurde missbräuchlich eingesetzt, um fehlende Kenntnisse bzw. Browser zu unterstützen, die sich einfach nicht an "Regeln" hielten und alles immer etwas anders interpretiert haben.


    Von meiner Seite aus: Ich werde dem grid-Layout mal eine Chance geben und es beim nächsten Projekt verwenden und testen. Für meine eigene Website kann ich dann mal experimentieren, ob grid- oder flexbox-Layout besser/einfacher ist.


    Beeindruckend ist aber: nahezu sämtliche Browser unterstützen mittlerweile durch die Bank die Techniken - das gab´s doch früher nicht, dass sich hier die Hersteller so einig waren...

  • Moin,


    ist zwar schon ein paar Tage her, aber vll. Interessiert es hier noch den einen oder anderen. Die Kollegen von Zurb haben die o.g. Techniken unter die Lupe genommen und direkt was auf die Beine gestellt, was sie XY-Grid nennen. Zurb: das sind die, die das Foundation-Framework entwickeln. Dieses XY-Grid ist also quasi ein Flexbox- und CSS Grid-Zwitter –mit einer Verbreitung von größer gleich 96% (laut Zurb). Die haben die Vorteile von CSS Grid in Flexbox einfließen lassen und für Kompatibilität gesorgt. Wir haben das vor ein paar Monaten in unsere TYPO3-Templates eingebaut und nutzen das – nach ein einigen Tests – mittlerweile auch in finalen Installationen. Im every-day-css-business ist das echt cool! Unsere Erfahrungen sind also durch die Bank positiv. Das ist IMHO also eine echte Alternative – zumindest für diejenigen, die kein Problem mit der Nutzung von Frameworks haben.


    //Stefan

  • Beitrag von pankajshiral ()

    Dieser Beitrag wurde von Cybergreek gelöscht ().