Techniken zur Erstellung flexibler Seitenlayouts mit Grid und Flexbox

Flexible Seitenlayouts mit Grid- und Flex-Strukturen erstellen

Heutzutage ist es von großer Bedeutung, dass Websites und Anwendungen sich an verschiedene Bildschirmgrößen und Geräte anpassen. Flexible Seitenlayouts verbessern die Benutzererfahrung, indem sie sicherstellen, dass Inhalte auf verschiedenen Bildschirmen korrekt und lesbar angezeigt werden. In diesem Artikel werden wir im Detail untersuchen, wie CSS Grid und Flexbox verwendet werden können, um flexible Seitenlayouts zu erstellen.

CSS Grid Layout: Die Kraft der zweidimensionalen Anordnung

CSS Grid Layout wurde entwickelt, um Webseiten basierend auf einem zweidimensionalen (Zeilen und Spalten) Rastersystem anzuordnen. Dies ist ein äußerst leistungsstarkes und flexibles Werkzeug zum Erstellen komplexer Layouts. Grid besteht aus einem Container und den Elementen (Items) innerhalb dieses Containers. Durch Definieren von Zeilen und Spalten auf dem Container wird die Platzierung der Elemente in diesen Rasterzellen gesteuert.

Grid-Container definieren und Raster erstellen

Um ein HTML-Element als Grid-Container zu definieren, verwenden wir die Eigenschaft `display: grid;`. Anschließend können wir die Spalten und Zeilen des Rasters mit den Eigenschaften `grid-template-columns` und `grid-template-rows` definieren. Zum Beispiel:


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Drei gleiche Spalten */
  grid-template-rows: auto auto; /* Zwei Zeilen, Höhe je nach Inhalt */
}

.item {
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

In diesem Beispiel wird das div-Element mit der Klasse `.container` als Grid-Container definiert. Die Zeile `grid-template-columns: 1fr 1fr 1fr;` erstellt drei Spalten gleicher Breite im Raster. Die Einheit `fr` ist eine flexible Längeneinheit, die den verbleibenden Platz proportional aufteilt. Die Zeile `grid-template-rows: auto auto;` erstellt zwei Zeilen und die Höhe der Zeilen wird automatisch an den Inhalt angepasst.

Grid-Elemente platzieren

Um Grid-Elemente im Raster zu platzieren, können wir die Eigenschaften `grid-column-start`, `grid-column-end`, `grid-row-start` und `grid-row-end` verwenden. Diese Eigenschaften geben an, in welcher Spalte ein Element beginnt und in welcher Spalte es endet, sowie in welcher Zeile es beginnt und in welcher Zeile es endet. Wir können auch die Kurzschreibweisen `grid-column` und `grid-row` verwenden.


.item1 {
  grid-column: 1 / 3; /* Beginnt in der 1. Spalte, endet in der 3. Spalte (3. Spalte nicht inbegriffen) */
}

In diesem Beispiel wird das Element mit der Klasse `.item1` von der 1. Spalte bis zur 3. Spalte (2 Spalten breit) platziert.

Grid-Bereiche (Grid Areas)

Für komplexere Layouts können wir Grid-Bereiche definieren und Elemente in diesen Bereichen platzieren. Mit der Eigenschaft `grid-template-areas` können wir den Zellen im Raster Namen zuweisen. Anschließend können wir Elemente mit der Eigenschaft `grid-area` in diesen benannten Bereichen platzieren.


.container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "sidebar content ads"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.ads {
  grid-area: ads;
}

.footer {
  grid-area: footer;
}

In diesem Beispiel wird ein Layout mit einem Header, einer Seitenleiste (Sidebar), einem Inhalt (Content), einem Werbebereich (Ads) und einer Fußzeile (Footer) erstellt. Jeder Bereich wird gemäß dem in `grid-template-areas` definierten Namen platziert.

Flexbox: Flexibilität bei der eindimensionalen Anordnung

CSS Flexbox (Flexible Box Layout) wurde entwickelt, um Elemente auf einer einzigen Dimension (Zeile oder Spalte) anzuordnen. Flexbox bietet eine flexible Möglichkeit, die Größe, Reihenfolge und Ausrichtung von Elementen zu steuern. Es ist in der Regel ideal für die Anordnung von Menüs, Navigationsleisten und kleinen Komponenten.

Flex-Container definieren

Um ein HTML-Element als Flex-Container zu definieren, verwenden wir die Eigenschaften `display: flex;` oder `display: inline-flex;`. `display: flex;` erstellt einen Flex-Container auf Blockebene, während `display: inline-flex;` einen Inline-Flex-Container erstellt.


<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>


.container {
  display: flex;
}

.item {
  padding: 20px;
  border: 1px solid #ccc;
  text-align: center;
}

In diesem Beispiel wird das div-Element mit der Klasse `.container` als Flex-Container definiert. Standardmäßig werden Flex-Elemente horizontal nebeneinander angeordnet.

Flexbox-Richtung (flex-direction)

Die Eigenschaft `flex-direction` bestimmt, in welcher Richtung die Flex-Elemente angeordnet werden. Die Werte sind: `row` (Standard, horizontal), `column` (vertikal), `row-reverse` (horizontal umgekehrt), `column-reverse` (vertikal umgekehrt).


.container {
  display: flex;
  flex-direction: column; /* Elemente vertikal anordnen */
}

Flexbox-Umbruch (flex-wrap)

Die Eigenschaft `flex-wrap` bestimmt, wie sich Flex-Elemente verhalten, wenn sie nicht in den Container passen. Die Werte sind: `nowrap` (Standard, Elemente bleiben in einer einzigen Zeile), `wrap` (Elemente werden in mehrere Zeilen umbrochen), `wrap-reverse` (Elemente werden in mehreren Zeilen in umgekehrter Reihenfolge umbrochen).


.container {
  display: flex;
  flex-wrap: wrap; /* Elemente sollen in die nächste Zeile springen, wenn sie nicht passen */
}

Flexbox-Ausrichtung (justify-content und align-items)

Die Eigenschaft `justify-content` bestimmt, wie Flex-Elemente entlang der Hauptachse ausgerichtet werden. Die Werte sind: `flex-start` (Standard, Elemente werden am Anfang ausgerichtet), `flex-end` (Elemente werden am Ende ausgerichtet), `center` (Elemente werden zentriert), `space-between` (Elemente werden mit gleichem Abstand verteilt, das erste und letzte Element werden an den Rändern ausgerichtet), `space-around` (Elemente werden mit gleichem Abstand verteilt, jedes Element hat einen gleichen Abstand um sich herum), `space-evenly` (Elemente werden mit gleichem Abstand verteilt, auch zu den Rändern wird ein gleicher Abstand gelassen).

Die Eigenschaft `align-items` bestimmt, wie Flex-Elemente entlang der Querachse ausgerichtet werden. Die Werte sind: `flex-start` (Elemente werden am Anfang ausgerichtet), `flex-end` (Elemente werden am Ende ausgerichtet), `center` (Elemente werden zentriert), `baseline` (Elemente werden an der Grundlinie ausgerichtet), `stretch` (Standard, Elemente dehnen sich bis zur Höhe des Containers aus).


.container {
  display: flex;
  justify-content: center; /* Horizontal zentrieren */
  align-items: center; /* Vertikal zentrieren */
}

Flex-Elemente dimensionieren (flex-grow, flex-shrink, flex-basis)

Die Eigenschaft `flex-grow` bestimmt, wie viel des verbleibenden leeren Raums im Container ein Flex-Element ausfüllen soll. Die Eigenschaft `flex-shrink` bestimmt, wie stark ein Flex-Element schrumpfen soll, wenn es nicht in den Container passt. Die Eigenschaft `flex-basis` bestimmt die anfängliche Größe eines Flex-Elements.


.item {
  flex-grow: 1; /* Verbleibenden Platz gleichmäßig aufteilen */
}

Grid und Flexbox zusammen verwenden

Grid und Flexbox werden noch leistungsfähiger, wenn sie zusammen verwendet werden. Grid ist ideal für die Erstellung des allgemeinen Seitenlayouts, während Flexbox für die Anordnung kleiner Komponenten und Inhalte verwendet werden kann. Beispielsweise können Sie die Hauptstruktur einer Website mit Grid erstellen und die Elemente in jeder Grid-Zelle mit Flexbox anordnen.

Fazit

CSS Grid und Flexbox sind die Eckpfeiler der modernen Webentwicklung. Sie bieten leistungsstarke und flexible Werkzeuge zum Erstellen flexibler und responsiver Seitenlayouts. In diesem Artikel haben wir die grundlegenden Konzepte und Anwendungsbeispiele von Grid und Flexbox untersucht. Mit diesen Informationen können Sie benutzerfreundliche Websites und Anwendungen entwickeln, die sich an verschiedene Bildschirmgrößen und Geräte anpassen. Durch Üben und Experimentieren mit verschiedenen Layouts können Sie die Möglichkeiten dieser Technologien voll ausschöpfen.