KONTAKT0511-52489841

Was ist die CSS Grid?

Was ist die CSS Grid?

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 ins responsive

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.

 

Quelle: https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/

Hier der dazugehörige 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.

Interessante BlogBeiträge

Kosten der Streitschlichtung über die OS-Plattform... Die OS-Plattform dient nicht als Streitschlichter sondern lediglich als Verbindungsstelle zu den Streitschlichtern. Durch die alleinige Nutzung der OS...
Coming soon: Google AdWords Woche Die kommende Woche - 16.03 - 20.03.2015 - steht im ideeos.de-Blog ganz im Zeichen von Google AdWords. Täglich wird eine andere Funktion von Google AdW...
Wie ein PRO googlen Google kann jeder - klar, manche gelangen aber schneller zum gesuchten Ergebnis als andere. Wie das? Ganz einfach, indem man die Suchergebnisse schon ...
Impressum auf Twitter Auf beruflichen Sozial Media Profilen muss ein rechtssicheres Impressum integriert werden. Um die Anforderungen in vollem Umfang umzusetzen, sollte di...