CSS Layout - Grid vs Flexbox

Ein gutes Layout sorgt dafür, dass Besucher auf einer Seite bleiben, weil es wichtige Dinge leicht zugänglich und intuitiv zu finden macht. Ein mieses Layout frustriert kann Seitenbesucher frustrieren und sorgt dafür, dass sie die Seite verlassen, weil sie nicht finden was, sie suchen.

Im Webdesign ist das Layout ein Begriff, der erklärt, wie eine Website auf dem Bildschirm dargestellt wird. HTML 5 hat eine ganze Reihe von Elementen, die Teile einer Webseite definieren: Kopfzeile, Nav, Abschnitt, Seite, Artikel und Fußzeile sind die wesentlichen Unterscheidungsmerkmale bei der Erstellung eines Layouts. Sie bilden die vier Hauptabschnitte einer Webseite - Kopfzeile/Banner, Navigation, Inhalt und Fußzeile.

Programmiersprachen lassen Websites lebendig erscheinen, doch im Kern jeder Webseite steht das gute alte HTML. Wenn wir über Layouts diskutieren, müssen wir Faktoren berücksichtigen, die ein gutes Layout ausmachen. Dazu gehören Reaktionsfähigkeit, Anzeigeports, Anzeigegeräte, Browser und die Bildschirmgröße der Seitenbesucher. Ein gutes Layout sieht nicht nur schön aus, sondern kann auch die ursprüngliche Absicht bewahren, indem es in jedes mögliche Anzeigeverhältnis passt. Diese Korrektur wird durch CSS erzeugt. In diesem Artikel werden wir zwei leistungsstarke Eigenschaften untersuchen: CSS Flexbox und CSS Grid.

WAS IST DAS CSS FLEXBOX LAYOUT? 

Das Flexible Box-Modul, üblicherweise mit 'Flexbox' abgekürzt, ist ein eindimensionales Layout-Modell. Das bedeutet, dass es entweder Zeile oder Spalte auf einmal behandelt, aber niemals beide zusammen. Flexbox ist effizient, wenn es darum geht, Elemente auf einer Seite auszurichten, zu verteilen und zu lenken.

Zwei Schlüsselbegriffe bei Flexbox sind die Hauptachse und die Querachse. Die Hauptachse eines flexiblen Gefäßes ist die Hauptachse, entlang der diese flexiblen Elemente angeordnet sind, und die Querachse steht senkrecht dazu. 

Zu Beginn werden wir unsere HTML-Divs in einen Flex-Wrapper verpacken. 

<div class="flex-wrapper">
  <div id="one">Header</div>
  <div id="two">Nav</div>
  <div id="three">Content</div>  
  <div id="four">Footer</div>
</div>

Im CSS, unserem übergeordneten Container, wird 'Flex-Wrapper' mit einer einfachen Codezeile in eine Flexbox umgewandelt. 

.flex-wrapper { 
  display: flex; 
} 

Ich werde einige Elemente und Eigenschaften mit leuchtenden Farben und Rändern hinzufügen, um unsere Container und Divs hervorzuheben. 

.flex-wrapper{ 
  display: flex; 
  background-color: beige; 
} 
.flex-wrapper > div { 
  background-color: green; 
  height: 100px; 
  width: 100px; 
  margin: 10px; 
} 

Du kannst sehen, wie schön die div Elemente sich horizontal positionieren. Aber wenn du bemerkst, dass es nicht ganz den ganzen Raum innerhalb des Containers einnimmt. Es gibt eine Lücke am Ende. Wir können das ändern, indem wir Flex-Grow hinzufügen. 

.flex-wrapper > div { 
  flex-grow: 1; 
}

Das Flex-Grow-Element verteilt jeden Gegenstand in einem flexiblen Container. Der Standardwert ist 0, und indem du einem der Divs eine Einheitsnummer zuweist, kannst du es massiver wachsen lassen als den Rest. Das Gegenteil davon ist Flex-Shrink. 

#one{ 
  flex-grow: 10;
} 
/* this gives the first div ten more units than the others */

Flex-direction 

Flex-direction steuert die Richtung, in die Gegenstände in einem Flex-Container zeigen sollen. Du kannst die Divs nach oben, unten, links und rechts gehen lassen. Du kannst die Divs auch in umgekehrter Reihenfolge haben. Standardmäßig werden die Gegenstände in einem Flex-Container von links nach rechts, horizontal, innerhalb der Hauptachse angeordnet. 

.flex-wrapper{ 
  display: flex; 
  flex-direction: row; /* default direction */ 
}
.flex-wrapper{ 
  display: flex; 
  flex-direction: row-reverse;  
}

Hier werden die Gegenstände von links nach rechts angezeigt, aber in umgekehrter Reihenfolge. Das vierte Div wird nun das erste und das erste - das letzte. 

.flex-wrapper{ 
  display: flex; 
  flex-direction: column; 
} 

Die Divs sind vertikal angeordnet - von oben nach unten. 

.flex-wrapper{ 
  display: flex; 
  flex-direction: column-reverse; 
}

Die Divs sind vertikal angeordnet, aber in umgekehrter Reihenfolge, wobei das vierte Div oben und das erste unten ist. 

Flex Basis 

Die Flex-Basis definiert die Größe eines Gegenstandes oder eines Containers im Flex-Container. Dieser Größenwert kann in em, px oder Prozent angegeben werden. Flex-Basis unterscheidet sich von Flex-Grow, weil es den Raum zwischen den Gegenständen in einem Container nicht gleichmäßig aufteilt. 

#three { 
  flex-basis: 200px; 
}

Flex 

Flex ist eine Shorthand-Property, die Flex-shrink, Flex-grow und Flex-Basis kombiniert. Es wird empfohlen, diese Eigenschaft zu verwenden, anstatt jede einzelne Eigenschaft und ihren Wert zu schreiben. Die Reihenfolge, in der die Werte für die Eigenschaft festgelegt werden, ist folgende: flex-grow, flex-shrink, flex-basis. 

.flex-wrapper { 
  display: flex; 
  flex: 0 0 200px; 
} 

Justify-Content und Align-Self 

Justify-content und align-self ist die perfekte Lösung, um ein Div oder einen Container auf einem Browser mit flexbox zu zentralisieren.

.flex-wrapper { 
  display: flex; 
  flex: 0 0 200px; 
  justify-content: center; 
  align-items: center; 
} 

CSS Layout GRID

CSS Grid ist ein mächtiges 2-dimensionales Layout. Das bedeutet, dass es sowohl mit den Zeilen als auch mit den Spalten des Layouts umgehen kann. CSS Grid arbeitet mit einer 12-Grid-Anordnung, bei der der Bildschirm (unsichtbar) in 12 Teile geteilt ist, und Gegenstände müssen in diese Anordnung passen.

Der Vorteil von CSS Grid gegenüber flexbox und anderen Layoutmodellen ist die Zweidimensionalität. Es macht auch die Positionierung einfacher, und die Elemente des Containers können so angeordnet werden, dass sie sich gegenseitig überlappen.

Definieren eines Grids im CSS Grid

Eine einfache CSS-Zeile verwandelt eine HTML-Struktur in ein CSS Grid.

<div class="container"> 
  <div id="one">Header</div> 
  <div id="two">Nav</div> 
  <div id="three">Content</div>  
  <div id="four">Aside</div>   
  <div id="five">Section</div>  
  <div id="six">Footer</div> 
</div> 

.container { 
  display: grid; 
} 

Grid-template-columns und grid-template-rows 

Die Grid-template-columns und grid-template-rows definieren die Größe einer Spalte oder Zeile. Sie weisen einem Div eine Größe zu, je nachdem, was zugewiesen wird. Wenn du die Größe einer Template-Spalte und der Größe des Template-Grids festlegst, benutzt du px, fr, Prozentsatz oder em.

.container { 
  display: grid; 
  grid-template-columns:  40px 1fr 20%;  
  grid-template-rows: 200px; 
  background-color: beige;   
}
.container > div { 
  background-color: green; 
  margin: 10px; 
} 

grid-template-columns:  40px 1fr 20%; - diese Codezeile sagt dem Browser, dass er dem ersten div eine Breite von 40px zuweisen soll. Das zweite nimmt einen Bruchteil des zugewiesenen Platzes ein und das dritte 20%. Automatisch bewegen sich die Divs 4 bis 6 unter die ersten 3 und nehmen die zugewiesenen Werte in der gleichen Reihenfolge an. Das bedeutet, dass Div 4 40px, Div 5 einen Bruchteil und Div 6, 20% zugewiesen werden. 

Um alle sechs Divs auf eine Zeile zu setzen, müssen wir der Grid-Template-Spalte sechs Werte zuweisen. Wir geben den Grid-Spalten keine unterschiedlichen Maße. Wir könnten nur Prozentwerte, fr oder px, verwenden. 

grid-template-rows: 200px; - dies weist allen Divs eine Höhe von 200px zu; 

FR

.container { 
  display: grid; 
  grid-template-columns: 16.7% 16.7% 16.7% 16.7% 16.7% 16.7%;  
} 

Indem ich 16,7% auf 6 Plätze verteilt habe, habe ich die sechs Divs im Container erfolgreich in sechs gleiche Teile auf dem Bildschirm aufgeteilt. Ich habe 16.7 verwendet, weil 16.7 mal 6 100% der Bildschirmbreite ergibt.

Die Verwendung von percentage und px funktioniert perfekt, aber es mangelt an ausreichender Flexibilität und übertrifft die nützlichste Ressource - einen Bruchteil des CSS Grid. 

Fr ist eine gebrochene Einheit. Sie weist jedem Gegenstand einen Bruchteil des verfügbaren Platzes zu. Der gebrochene Platz kann vergrößert werden, um jedes div unterzubringen, je nachdem wie viel Platz es benötigt.

Unsere Grid-Template-Spalten werden nun zu

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

Dadurch wird jedes Div gleichmäßig auf dem Bildschirm aufgeteilt.

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

Dieser neue Wert macht den zweiten und vierten Div doppelt so groß wie der Rest. Am wichtigsten ist, dass es immer noch gleichmäßig im Browser verteilt ist und sehr gut reagiert.

Funktion wiederholen

Anstatt die Werte wiederholt aufzuschreiben, können wir die Wiederholungsfunktion nutzen, um Werte einmal zuzuweisen.

.container { 
  display: grid; 
  grid-template-columns: repeat(6, 1fr);
}

Die Syntax ist relativ einfach. Wir müssen das Wort 'repeat' benutzen und dann zuweisen, wie oft wir die Größe wiederholt haben wollen, also 6, und dann den Messwert angeben. Diese Wiederholungsfunktion funktioniert sowohl mit fr, em, px als auch in Prozent. Das funktioniert auch für Template-row.

Gap

Gap, auch Gutter genannt, ist eine CSS Grid-Eigenschaft, die es dir erlaubt, den Abstand zwischen divs in einem CSS Grid Container festzulegen. Sie funktioniert genau wie die margin-Eigenschaft und wird hauptsächlich in px berechnet.

gap: 10px;

Grid-column-start/grid-column-end und grid-row-start/grid-row-end

Der grid-column-start und das grid-column-end platzieren einen Gegenstand des Grids an einer bestimmten Stelle innerhalb der Spalte, indem sie sich auf bestimmte Grid-Linien beziehen. Der grid-row-start und grid-row-end machen dasselbe mit der Zeile. Indem man dieser Eigenschaft einen Wert zuweist, können Gegenstände des Grids bequem so manipuliert werden, dass sie innerhalb der angegebenen Bereiche beginnen und enden.

.container { 
  display: grid; 
  grid-template-columns: repeat (3, 1fr); 
  grid-template-rows: repeat(4, 200px); 
}
#one { 
  grid-column-start: 1; 
  grid-column-end: 3; 
  grid-row-start: 1; 
  grid-row-end: 4; 
}

Wenn du diese Werte dem ersten div zuweist, wirst du bemerken, dass es das zweite div um eine Einheit weiter weg schiebt, und es die ersten beiden Positionen einnimmt und div 3 darunter schiebt. Reihenweise nimmt es nun drei Positionen ein, was ihm eine größere Höhe gibt.

Es gibt eine Regel beim Indexieren in der Programmierung, weil wir im Allgemeinen von 0 an zählen, was hier zutrifft. Der letzte Wert wird normalerweise erwähnt, aber nicht in Kraft gesetzt. Zum Beispiel ist das grid-column-end 3, aber es hört bei 2 auf, genau wie das grid-column-end, das bei 3 und nicht bei 4 endet.

Grid-columns und grid-row

Grid-column ist eine Kurzform für die Angabe von grid-column-start und grid-column-end. Grid-row ist eine prägnante Art und Weise, einen grid-row-start und ein grid-row-end festzulegen.

Hier trennt ein Schrägstrich den Raster-Spalten-Startwert vom Raster-Spalten-Endwert. Dies gilt auch für die Zeile.

#one { 
  grid-column: 1/3; 
  grid-row: 1/4; 
}

Galerien mit CSS Grid erstellen

CSS Grid ist das perfekte Modell, um Galerien zu erstellen. Mit wenig Code und Manipulation kannst du perfekte, ansprechende Galerie-Layouts erstellen.

Ein Mosaikgalerie-Layout

Ein Mosaik-Galerie-Layout erzeugt gleichmäßige Kacheln von Bildern, die gleichmäßig über eine Seite/einen Container verteilt sind.

<div class="container"> 
  <div id="one">Bild Eins</div> 
  <div id="two">Bild Zwei</div> 
  <div id="three">Bild Drei</div>  
  <div id="four">Bild Vier</div>   
  <div id="five">Bild Fünf</div>  
  <div id="six">Bild Sechs</div> 
  <div id="seven">Bild Sieben</div> 
  <div id="eight">Bild Acht</div> 
  <div id="nine">Bild Neun</div> 
</div>

.container{ 
  display: grid; 
  grid-template-columns: repeat(3, 1fr);  
  grid-template-rows: repeat(3, 200px); 
  background-color: beige; 
  gap: 10px 
}
.container > div { 
  background-color: green; 
}

Dadurch entsteht ein perfekt gekacheltes Mosaik-Bildergalerie-Layout.

Ein Mauerwerk-Galerie-Layout

Dieses Layout ist ungleichmäßig, da es keine feste Zeilenhöhe hat. Mit Hilfe von grid-columns und grid-rows können wir die Bilder so anpassen, dass sie über zugewiesene Bruchteile von Einheiten passen und sich so bewegen, wie wir wollen.

.container { 
  display: grid; 
  grid-template-columns:  repeat(3, 1fr);  
  grid-template-rows: repeat(5, 200px); 
  background-color: beige; 
  gap: 10px; 
}
.container > div { 
  background-color: green; 
}
#one { 
  grid-column: 1/3; 
  grid-row: 1/4; 
} 
#two { 
 grid-row: 1/3; 
}  
#five { 
  grid-column: 4/2; 
}   
#seven { 
  grid-row: 6/1; 
}

Grid Template Area

Grid-template-area weist einem Div/Element einen Namen zu, damit die Grid-Area-Eigenschaft darauf verweisen kann. Es funktioniert genauso wie grid-column und grid-row und erlaubt es, bestimmte Bereiche mit Leichtigkeit innerhalb der Struktur des Grids abzubilden und unterzubringen.

<div class="container">
  <div id="one">Header</div> 
  <div id="two">Nav</div> 
  <div id="three">Aside</div>  
  <div id="four">Content</div>   
  <div id="five">Section</div>  
  <div id="six">Footer</div>
</div>

.container { 
  display: grid; 
  grid-template-columns:  repeat(3, 1fr);  
  grid-template-rows: repeat(2,100px); 
  background-color: beige; 
  gap: 10px; 
  grid-template-areas: 'header header header' 
                       'nav nav nav' 
                       'aside content content' 
                       'aside section section' 
                       'footer footer footer'; 
}
.container > div { 
  background-color: green; 
  font-size: 40px; 
}   
#one { 
  grid-area: header; 
} 
#two { 
 grid-area: nav; 
}
#three { 
  grid-area: aside; 
}     
#four { 
  grid-area: content; 
} 
#five { 
  grid-area: section; 
}    
#six { 
  grid-area: footer; 
}

Grid Areas

Die Bezugnahme auf die genannten Areas muss in der Reihenfolge erfolgen, in der sie aufgerufen wurden. Zum Beispiel kann die Grid Area für #one keine Fußzeile sein, da dies die letztgenannte Grid Areaist. Wird die Reihenfolge nicht eingehalten, führt dies zu einem Fehler im Design.

CSS Flexbox vs. Grid - Was sollte man nun nutzen? 

Kurz gesagt ist Grid ein Container-basiertes Layout, während Flexbox - inhaltsbasiert ist. Sowohl CSS Grid als auch Flexbox sind leistungsstark auf ihre eigene Art und Weise. Jedoch bietet CSS Grid mehr Features und macht es einfacher, Zeilen und Spalten innerhalb des Grids zu manipulieren. Bevor du dich entscheidest, solltest du die Komplexität, die Struktur und den Inhalt der Seite, die du erstellen sollst, verstehen. Hier ein etwas detaillierterer Vergleich: Im Flexbox-Layout wird die Größe einer Zelle (Flex-Item) innerhalbdes Flex-Items selbst definiert, und im Grid-Layout wird die Größe einer Zelle (Grid-Item) innerhalbdes Grid-Containers definiert.

Ich würde dir allerdings raten, für das Gesamtlayout der Seite CSS Grid zu verwenden und dann die Flexbox für die Gegenstände des Containers. CSS Grid funktioniert auch perfekt für einzelne Gegenstände, und es berücksichtigt Nuancen innerhalb der eigentlichen Grid-Struktur besser als Flexbox. Zum Beispiel werden die Bereiche des Grid-Templates die Struktur der Seite in wenigen Sekunden abbilden. So kannst du dich darauf konzentrieren, den Inhalt so auszurichten, wie Du es für richtig hältst.