Es gibt verschiedene Möglichkeiten Layouts mit CSS umzusetzen. Kein WebDesigner würde jedoch heute anfangen eine eigene Struktur zu erstellen, denn die Komplexität ist durch die Responsivität des www ziemlich groß geworden. Trotz einiger grundsätzlicher Ähnlichkeiten werden die CSS Grid und CSS Flexbox für unterschiedliche Aufgaben verwendet, da sie jeweils ein ganz anderes Problem lösen können. Im Flexbox-Layout wird nämlich die Größe einer Zelle (flex-item) innerhalb des flex-items selbst definiert, im Grid-Layout dagegen wird die Größe der Zelle (grid-item) innerhalb des Grid-containers definiert.

Ein kleiner geschichtlicher Exkurs

Es gibt verschiedene Möglichkeiten WebDesign Layouts mit CSS umzusetzen. In den Entstehung des www nutzten WebDesigner in der Regel Tabellen, CSS war noch garnicht so verbreitet. Die einzelnen Formatierungen wurden direkt in der HTML Code eingegeben. Dann kamen für eine ziemlich lange Zeit die div Floats. Mit ihnen erreichte auch endgültig CSS das Internet. Allerdings noch mega unproduktiv. Jeder Sektion jeder Tag bekam in der Regel seinen eigenen CSS Part. Die FrameWork Idee war noch nicht geboren.

Der WorkFlow wird besser dank CSS FrameWorks

Das aller erste CSS Framework, das uns inspiriert hat uns dieser sehr effizienten Arbeit mit CSS zu widmen, was das FrameWork 960-grid. Basierend auf der Tatsache, dass zur Zeit der Veröffentlichung alles was mit dem Internet zu tun hatte über Desktops lief. Tablets waren noch nicht geboren, Mobiles sahen noch aus wir KindeSpielzeug, war diese CSS Grid auf eine Breite von 960px optimiert. Das reichte damals auch noch völlig, die größte Auflösung lag bei 1440px. Diese Grid war auch noch das, was das Wort grid auch wortwörtlich übersetzt heisst. Ein Gitter.

Der Weg das responsive Internet

Dank der heutigen Vielfalt an Geräten und Auflösungen hat sich schliesslich unter anderem Twitter der Sache angenommen und ein responsives CSS FrameWork entwickelt, das eine responsive Gestaltung ermöglicht und zusätzlich noch zahlreiche weitere Inhaltselemente bereit stellt. Es basiert auf dem Ansatz Mobile First. Das bedeutet, dass von der kleinsten Auflösung ausgehend das FrameWork Konzept entwickelt wurde. Bootstrap ist heute eines der wichtigsten FrameWorks und ab der Version 4 mit CSS Flexbox Eigenschaften versehen. Dank seiner umfassenden CSS Struktur ist Bootstrap die Basis zahlreicher WebSeiten und OnlineShops.

Die Zukunft ist schon auf dem Vormarsch

Die Weiterentwicklung der responsiven FrameWorks wie Bootstrap hat bereits begonnen. Grid-Layouts, die keine Medienanfragen verwenden. Das liegt daran, dass Flexbox- und Grid-Layouts auf dem Konzept der Reaktionsfähigkeit basieren und daher die Verwendung von Media Queries reduzieren stehen in den Startlöchern bzw. die Ansätze sind bereits im Internet ausführlich erklärt. Ob sie sich durchsetzen werden wird sich zeigen. Interessiert, dann schauen sie sich diesen Artikel an.

Flexbox-Layouts zeichnen sich durch ihre extreme Flexibilität aus. Wie auf dem nachstehenden Bild zu erkennen, können sich die Objekte in Flexbox basierend auf dem verfügbaren Platz  ausdehnen. Flexbox erreicht dies mit Flex-Grow- und Flex-Shrink-Eigenschaften. Grid erreicht ein etwas anderes Ergebnis, das aber in bestimmten Anforderungen wie z.B. in einer sauberen Listing Ansicht eines Onlineshops durchaus gewollt sein kann. Die Kombination aus Minmax- und Auto-Fill-Funktionen in der CSS Eigenschaft grid-template-columns führt zu dem unten gezeigten Ergebnis bei Grid.

Der dazugehörige HTML Quellcode

<h2>Flexbox-Layout</h2>
<div class="row-flex">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
  
<h2>Grid-Layout</h2>
<div class="row-grid">
    <div>1 2 3  4 5 6 7 8 9 0</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

Das Flexbox CSS

.row-flex { 
    margin: 40px auto; 
    max-width: 600px; 
    display: flex; 
    flex-wrap: wrap; 
} 
.row-flex div { 
    border: 1px dashed gray; 
    flex: 1 1 100px; 
    text-align: center; 
    padding: 12px; 
}

Das Grid CSS

.row-grid { 
    margin: 40px auto; 
    max-width: 600px; 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
} 
.row-grid div { 
    border: 1px dashed gray; 
    text-align: center; 
    padding: 12px; 
}

Besonders an den Zellen 5 und 6 kann man, wenn sie nach unten gedrückt werden, genau erkennen was die beiden Layout Ansätze unterscheidet. Beim Flexbox-Layout haben die Zellen 5 und 6 nicht dieselbe Größe wie die anderen darüberliegenden Zellen, wenn sie nach unten gedrückt werden. Beim Grid-Layout hingegen behalten sie die gleiche Größe wie alle anderen Zellen im Grid. Das passiert, weil ein Flex-Element, wenn es in eine neue Zeile eingepackt und verschoben wird, vom Flexbox-Layout-Algorithmus als Teil eines anderen Flex-Containers behandelt wird. Daher verliert der geschobene Gegenstand seinen Bezug zu der darüber liegenden Zeile.

Der Unterschied zwischen FlexBox und Grid

Flexbox kann optional Flex-Zeilen ausfüllen und so an die entsprechende Bildgröße anpassen. Wenn wir zulassen, dass eine Flex-Zeile umhüllt (wrap), wir eine neue Zeile (row) erstellt, wenn die erste Flex-Zeile vollständig gefüllt ist. Dabei ist die Darstellung der zweiten Flex-Zeile abhängig von der ersten. Bei FlexBox verhalten sich die einzelnen Spalten (column) oft wie ein Mauerwerk (masonry). Ein sehr dynamisches und amorfes Design ist mit FlexBox möglich. FlexBox kann man als eindimensionale Struktur bezeichnen. Die einzelnen Elemente legen sich dynamisch wie eine Schlange auf einer eindimensionalen Ebene in den ViewPort.

Grid kann auch optional umhüllen, wenn wir auto filling zulassen. Wenn das der Fall ist, wird auch die erste Zeile gefüllt und erst dann die nächste erzeugt. Diese aber verhält sich genau so wie die erste. Eine Ähnlichkeit mit einer Tabelle entsteht, allerding ist Grid dynamisch und responsiv. Im Gegensatz zu Tabellen. Grid kann man sich als zweidimensionale Struktur vorstellen, in der wir, wenn wir möchten, die Größenänderung von Zeilen und Spalten festlegen können und die Elemente dann explizit in beide Zeilen und Spalten einfügen können.

Lass sie uns gemeinsam
etwas Großes schmieden

Kontaktieren sie uns für ein schnelles & unverbindliches Angebot.

Wir melden uns

Sharing is caring!