table oder flexbox ... oder grid?

[Gunnar Bittersmann]

@@borisbaer

1. Wenn ich eine Tabelle mit JavaScript sortierbar machen möchte, brauche ich dann zwangsläufig grid oder flexbox?

Die Änderung der Sortierreihenfolge ändert ganau das: die Reihenfolge der Daten. Sie ändert weder Struktur noch Layout des Dokuments, hat also keinen Einfluss auf Markup und CSS.

2. Ist es heutzutage en vogue das Seitenlayout mit grid zu erstellen?

Kommt drauf an, wie das Seitenlayout aussieht. Aber ja, für viele Layouts dürfte Grid das geeignete Werkzeug zur Umsetzung sein.

Sollte z.B. der header in der mobilen Ansicht auf fixed umgestellt werden, schießt grid da quer?

Kommt drauf an, wie das Headerlayout aussieht. So wie auf Folie 19: gleich viel Abstand links und rechts des Logos? Dann Umsetzung mit Flexbox.

Oder so wie auf Folie 20: Logo zentriert? Dann Umsetzung mit Grid.

Siehe auch Folien 12 bis 15 des in den Ressourcen angegebenen Vortrags Creative CSS Layout & the Flexible Web von Michelle Barker.

3. In welchen Fällen ist grid flexbox vorzuziehen?

In allen, in denen es um ein zweidimensionales Raster geht.

Flexbox wirkt nur in eine Dimension. Nachfolgende Flexitems wissen nichts über die Anordnung ihrer Vorgänger, und dann kommt sowas raus wie auf Folie 14 gezeigt.

Grid hingegen ist 2D; alle Griditems auf Folie 15 haben dieselbe Größe.

Und außerdem in Fällen wie dem unter 2.

Ab Folie 38 widmet sich Michelle Barker dem Thema Flex or Grid?

4. Wenn ich eine Tabelle mit Paginierung haben möchte (also dass nach bspw. 50 Einträgen eine zweite Seite erstellt wird, zu der man dann wechseln kann), spielt es da eine Rolle, ob ich sie mit table, flexbox oder grid kreiert habe? Oder ist das egal?

Die Antwort fällt so aus wie die unter 1.

🖖 Живіть довго і процвітайте