Flexbox und Grid-Layout sind fortschrittliche Layout-Modelle in CSS, die es ermöglichen, komplexe Strukturen mit flexiblen und responsiven Designs zu erstellen. Mit diesen Technologien können nicht nur komplexe Strukturen geschaffen, sondern auch äußerst flexible und responsive Designs realisiert werden. Flexbox bietet eine einfache Möglichkeit, Elemente entlang einer Achse zu organisieren und zu verteilen, während Grid-Layout eine umfassendere Möglichkeit zur Erstellung von zweidimensionalen Layouts ermöglicht. In diesem Beitrag werden wir ihre Anwendungen verstehen und lernen, wie wir sie effektiv in unserer Webentwicklung einsetzen können.
display: flex;: Dies stellt den Container als Flexbox-Container dar, wodurch die darin enthaltenen Elemente in einer Reihe (Standardverhalten) oder Spalte angeordnet werden. Flexbox ist ideal für ein eindimensionales Layout, entweder horizontal oder vertikal. Sie bietet keine direkte Möglichkeit, ein mehrdimensionales Raster wie bei Grid-Layout zu erstellen
flex: 1;: Dies wird normalerweise auf die flexiblen Elemente innerhalb des Flexbox-Containers angewendet. Hier gibt flex: 1; an, dass das Element flexibel ist und den verfügbaren Raum im Container ausfüllt.Es ist äquivalent zum Grid-Layout der flex-grow: 1;, was bedeutet, dass es so viel Platz wie möglich einnehmen soll.
Grid-Layout:
display: grid;: Dies stellt den Container als Grid-Container dar. Im Gegensatz zu Flexbox, das eindimensional ist, ermöglicht Grid-Layout das Erstellen eines zweidimensionalen Layouts mit sowohl Zeilen als auch Spalten.
grid-template-columns: repeat(3, 1fr);: Dies definiert die Spalten im Grid. In diesem Beispiel werden drei Spalten mit jeweils einem fraktionierten Anteil des verfügbaren Raums erstellt. Dies bedeutet, dass die Spalten gleichmäßig auf den verfügbaren Platz aufgeteilt werden.
grid-column: span 2;: Dies wird auf die Elemente innerhalb des Grids angewendet und gibt an, über wie viele Spalten das Element verlaufen soll. Hier nimmt das Element zwei Spalten im Grid ein.
Zusammenfassung:
Flexbox ist gut für einzeilige oder einspaltige Layouts geeignet und verwendet display: flex; auf dem Container und flex: 1; auf den flexiblen Elementen, um den verfügbaren Raum zu füllen.
Grid-Layout ist mächtiger und eignet sich gut für Layouts mit mehreren Zeilen und Spalten. Es verwendet display: grid; auf dem Container und grid-column: span x; auf den Elementen, um die Anzahl der Spalten zu steuern, die sie einnehmen.
Beide Ansätze haben ihre spezifischen Anwendungsfälle, abhängig von den Anforderungen des Layouts, das man erstellen möchte.
1. Flexbox
Beachte, dass die in den Beispielen verwendeten Selektoren wie .flex-container, .flex-item, .grid-container und .grid-item für illustrative Zwecke dienen. In der Praxis können diese Selektoren auch anders benannt werden.
Ein Container mit der Classe .flex-container wird erstellt, um ein flexibles Layout zu ermöglichen.
Die Eigenschaften justify-content und align-items steuern die Ausrichtung der Elemente im Container.
Flex-Elemente:
Flex-Elemente können mit der Classe .flex-item und der Eigenschaft flex: 1; flexibel gestaltet werden.
Diese Struktur ermöglicht ein flexibles Layout, bei dem die Ausrichtung der Elemente im Container leicht gesteuert werden kann. Flex-Elemente werden durch die Classe .flex-item und die Eigenschaft flex: 1; flexibel angepasst.
Die Eigenschaft flex: 1;
Die Eigenschaft flex: 1; für flexibles Wachstum der Elemente ist eine Abkürzung für drei separate Eigenschaften im Flexbox-Modell: flex-grow, flex-shrink und flex-basis. Hier ist die vollständige Erklärung:
.flex-item {
flex: 1;
}
Dies ist eine verkürzte Schreibweise für:
.flex-item {
flex-grow: 1; /* Verhältnis, wie viel zusätzlichen Platz das Element einnehmen kann */
flex-shrink: 1; /* Verhältnis, wie viel Platz das Element reduziert, wenn notwendig */
flex-basis: 0; /* Ursprüngliche Größe des Elements, bevor zusätzlicher Platz hinzugefügt wird */
}
Die Eigenschaften haben folgende Bedeutungen:
flex-grow: Legt fest, in welchem Verhältnis das Flex-Element zusätzlichen Platz innerhalb des Flex-Containers einnimmt. In diesem Fall wird es den verfügbaren Raum zu gleichen Teilen mit anderen Flex-Elementen aufteilen.
flex-shrink: Legt fest, in welchem Verhältnis das Flex-Element Platz reduziert, wenn der verfügbare Platz im Flex-Container begrenzt ist. Hier wird das Element um denselben Faktor wie andere schrumpfen.
flex-basis: Legt die ursprüngliche Größe des Flex-Elements fest, bevor zusätzlicher Platz hinzugefügt wird. Hier wird es auf 0 gesetzt, damit der verfügbare Platz gleichmäßig aufgeteilt wird.
Die verkürzte Schreibweise flex: 1; ist eine gängige Praxis, wenn das Ziel ist, dass das Flex-Element den verfügbaren Raum im Container optimal ausnutzt.
Ein Container mit der Classe .grid-container wird erstellt, der mit display: grid; ein Grid-Layout definiert.
Die Eigenschaft grid-template-columns gibt an, dass es im Grid drei Spalten gibt, die jeweils den gleichen Anteil des verfügbaren Raums einnehmen (dank 1fr).
Die Eigenschaft gap legt den Abstand zwischen den Gridelementen fest.
Die Abkürzung fr steht für "fractional unit" (Bruchteil-Einheit) in CSS Grid und CSS Flexbox. Mit 1fr gibt man an, dass ein Container oder ein Element einen Bruchteil des verfügbaren Raums einnehmen soll.
Zum Beispiel:
Wenn zwei Spalten jeweils 1fr haben, teilen sie den verfügbaren Platz zu gleichen Teilen.
Wenn eine Spalte 2fr und eine andere 1fr hat, nimmt die erste doppelt so viel Platz wie die zweite ein.
fr ist besonders nützlich, wenn man flexible und responsive Layouts erstellen möchte, da es sich automatisch an die verfügbare Breite anpasst
Grid-Eigenschaften für die Elemente:
Die Eigenschaft grid-column: span 2; wird auf die Classe .grid-item angewendet.
Dies bedeutet, dass jedes Element mit dieser Classe über zwei Spalten im Grid reichen soll.
Diese Eigenschaft bestimmt also, wie breit das Gridelement sein soll, wenn es auf der Grid-Ebene positioniert wird, und es nimmt dabei zwei der definierten Spalten des Grids ein.
Diese Struktur ermöglicht es, ein Grid-Layout mit definierten Spalten und Abständen zu erstellen und gleichzeitig die Breite der Gridelemente flexibel zu gestalten.
Ein Beispiel für ein Grid-Layout in einer ähnlichen Form wie das Flexbox-Layout:
/* Grid-Layout Beispiel */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 25px;
}
/* Grid-Layout-Stile für die Elemente */
.grid-item {
grid-column: span 1;
border: 1px solid #333;
padding: 20px;
margin: 5px;
}
Grid-Layout für den Container:
Dieses CSS definiert ein Grid-Layout für den Container mit drei gleich großen Spalten (grid-template-columns: repeat(3, 1fr);) und einem Abstand von 10 Pixeln zwischen den Elementen (gap: 10px;).
Der Container hat einen Hintergrund, Padding und andere Stile für visuelle Verbesserungen.
Grid-Eigenschaften für die Elemente:
Die Elemente innerhalb des Grids werden durch die Classe .grid-item dargestellt.
Hier ist grid-column: span 1; gesetzt, um jedes Element über eine Spalte im Grid zu erstrecken.
Du kannst diese Zahl anpassen, um die Breite der Elemente zu verändern.
Diese Struktur ermöglicht es, ein Grid-Layout mit definierten Spalten, Abständen und visuellen Stilen zu erstellen, während gleichzeitig die Breite der Gridelemente flexibel angepasst werden kann.
Dieses CSS auf die entsprechenden HTML-Elemente angewendet:
Das ist ein Grid-Layout, welches sich der Flex-Box nicht unterscheidet:
Element 1
Element 2
Element 3
Das Grid-Element spielt folgend eine Rolle, indem es drei Spalten in zwei Zeilen zeigt:
/* Grid-Layout-Stile für den Container */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
grid-template-rows: repeat(
2,
auto
); /* Zwei Zeilen mit automatischer Höhe */
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 25px;
}
/* Grid-Layout-Stile für die Elemente */
.grid-item {
border: 1px solid #333;
padding: 20px;
margin: 5px;
}
Der .grid-container ist als Grid-Container konzipiert und verwendet die Grid-Anzeige (display: grid;). Dies ermöglicht die Erstellung eines mehrdimensionalen Rasters für die Anordnung von Elementen.
grid-template-columns: repeat(3, 1fr);: Definiert drei Spalten im Raster. Jede Spalte nimmt den gleichen verfügbaren Raum ein, da 1fr für einen fraktionierten Anteil steht.
grid-template-rows: repeat(2, auto);: Legt zwei Zeilen im Raster fest. Die Höhe der Zeilen wird automatisch an den Inhalt angepasst (auto), was bedeutet, dass die Zeilen unterschiedliche Höhen haben können, abhängig vom Inhalt der Zellen.
gap: 10px;: Bestimmt den Abstand (Zwischenraum) zwischen den Zellen im Raster.
background-color: #f0f0f0;: Setzt die Hintergrundfarbe des Containers auf einen hellen Grauton.
padding: 10px;: Fügt einen Innenabstand zum Container hinzu, um den Inhalt von den Rändern zu trennen.
Diese Stile ermöglichen es, ein klar strukturiertes und ansprechendes Grid-Layout zu erstellen.
Das Grid-Element zeigt drei Spalten in zwei Zeilen:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Folgend präsentieren wir unseren "Tabla Container" und hoffen hiermit, das Thema durch dieses visuelle Element weiter zu unterstreichen. Der Tabla Container nutzt ein responsives Grid-Layout, um die Anzeige der Tabla-Buttons auf verschiedenen Bildschirmgrößen zu optimieren. Dies ermöglicht eine flexible und ansprechende Darstellung, unabhängig davon, ob du die Seite auf einem Desktop, Tablet oder Smartphone betrachtest.
Das grid-template-columns definiert die Anzahl und Größe der Spalten im Grid: – auto-fill: Füllt den verfügbaren Platz mit so vielen Spalten wie möglich – minmax(90px, 1fr): Jede Spalte hat eine minimale Breite von 90px und kann maximal 1fr (Fraktion) des verfügbaren Platzes einnehmen.
Die Bezeichnung data-hoveraudio ist ein individuellen Datenattribut. In HTML können Entwickler individuelle Datenattribute verwenden, um zusätzliche Informationen an Elemente zu binden, die nicht standardmäßig von HTML-Elementen unterstützt werden. Siehe im Beitrag Das Audio mit Hover starten!
C
D
E
F
G
A
B
Beispiel für ein einfaches Bild-Rasterlayout
Dem folgt der Vergleich zur alternativen Schreibweise mit dem CSS Grid Generator.
CSS Grid Generator für alternative Schreibweise und Code-Vergleich
Im Internet gibt es mehrere "CSS Grid Generatoren". Dies hier sollte lediglich als Einführung dienen, um ein Gefühl für das Layout zu entwickeln.
CSS Grid Generator, erweiterte Einstellungen.
Mit dem CSS Grid Generator erfolgt eine etwas andere Schreibweise. Klicke dort in die Felder, welche konfiguriert werden sollten und beachte rechts die erweiterten Einstellungen.
Des Beispiels und Codes von oberhalb ein Vergleich: Der nachfolgende Code weist eine bessere Performance auf, da er weniger spezifische Selektoren und Regeln enthält. Der oben stehende Code verwendet hingegen spezifischere Selektoren und mehr Regeln, um die Positionierung der Bilder und den Abstand zu kontrollieren. In der Regel ist es empfehlenswert, die Lösung so einfach wie möglich zu gestalten, um die Leistungsfähigkeit und Wartbarkeit des Codes zu verbessern.
Eine kleine Anpassung des generierten Codes: Hier wird grid-gap anstelle von grid-column-gap und grid-row-gap für den Abstand zwischen den Grid-Zellen verwendet, was die Lesbarkeit des Codes verbessert. Das margin-top: -14px; ist hier per Hand hinzugefügt, um den Abstand zwischen den beiden Zeilen zu verringern.
Zum Schluss des Grid-Layouts zeigen wir ein weiteres Beispiel in CSS. Dieses Beispiel erstellt ein Raster mit variierenden Spalten- und Zeilenbreiten. In der ersten Zeile gibt es zwei Spalten, in der zweiten Zeile drei Spalten, und in den folgenden Zeilen je zwei Spalten. Die Spaltenbreiten sind unterschiedlich, wobei die mittlere Spalte doppelt so breit ist wie die anderen. Die Höhen der Zeilen sind ebenfalls unterschiedlich, mit einer festen Höhe von 200px in der zweiten Zeile:
/* Grid-Layout-Stile für den Container */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Drei Spalten, unterschiedliche Breiten */
grid-template-rows: auto 200px auto; /* Drei Zeilen, unterschiedliche Höhen */
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 25px;
}
/* Grid-Layout-Stile für die Elemente */
.grid-item {
border: 1px solid #333;
padding: 20px;
margin: 5px;
}
/* Zusätzliche Stile für spezifische Elemente */
.grid-item:nth-child(2) {
grid-column: span 2; /* Nimmt zwei Spalten ein */
}
.grid-item:nth-child(4) {
grid-row: span 2; /* Nimmt zwei Zeilen ein */
}
In diesem Beispiel:
Der grid-template-columns-Eigenschaft werden drei Spalten mit unterschiedlichen Breiten zugewiesen (1 fr, 2 fr, 1 fr).
Der grid-template-rows-Eigenschaft werden drei Zeilen mit unterschiedlichen Höhen zugewiesen (automatische Höhe, feste Höhe von 200px, automatische Höhe).
Die gap-Eigenschaft legt den Abstand zwischen den Zellen fest.
Zusätzlich werden für bestimmte Elemente spezifische Stile angewendet:
Das zweite Element (nth-child(2)) erstreckt sich über zwei Spalten.
Das vierte Element (nth-child(4)) erstreckt sich über zwei Zeilen.
Dieses Beispiel zeigt, wie flexibel Grid-Layouts sind, insbesondere wenn es darum geht, unterschiedliche Breiten und Höhen für Zeilen und Spalten zu definieren.
Im Vergleich zu herkömmlichen Tabellen bietet das Grid-Layout in CSS eine flexiblere und leistungsfähigere Möglichkeit, Strukturen auf Webseiten zu gestalten. Während Tabellen in erster Linie für die Darstellung von tabellarischen Daten gedacht sind, ermöglicht das Grid-Layout die Erstellung komplexer Layouts für die gesamte Webseite.
Ein wesentlicher Vorteil des Grid-Layouts besteht darin, dass es eine zweidimensionale Struktur bietet, wodurch sowohl Zeilen als auch Spalten individuell gestaltet werden können. Im Gegensatz dazu ist eine Tabelle auf eine lineare Struktur beschränkt, was die Anpassung und Positionierung von Elementen erschweren kann.
Grid-Layout erlaubt außerdem eine präzise Kontrolle über den Abstand zwischen den Elementen (mit der gap-Eigenschaft) und ermöglicht das Erstellen von responsiven Designs durch die Definition von automatischen Größenanpassungen für verschiedene Bildschirmgrößen.
Insgesamt bietet das Grid-Layout eine moderne und flexible Alternative zu Tabellen, wenn es darum geht, komplexe Layouts auf Webseiten zu erstellen.
Schaffe mit WordPress und Advanced Editor schöne Websites. Hier ist für dich, euch eine leicht lesbare und freundliche Anleitung.
Hinweis: Unsere Website verwendet ausschließlich funktionale Cookies und setzt keine Cookies von Drittanbietern.
Aber hallo!
– zur Begrüßung eine Rundfrage?
🧡 … das so zum Zeit entschleunigen.
Technische Herausforderungen sind Teil des Website-Betriebs. Wir interessieren uns dafür, wie du mit solchen Problemen umgehst. Bitte teile uns mit, ob du bereits technische Probleme auf deiner Website hattest und wie du sie gelöst hast.
Wird geladen ...
Während deines Besuchs kann es neben informativen Ergebnissen auch zu Klangeffekten kommen, um bestimmte Elemente hervorzuheben. – Viel Spaß beim Erkunden!
Pop-up
Das zur Umfrage ist von WP-Polls und das Pop-up ist von Boxzilla.
