Responsives Webdesign mit CSS Grid und Flexbox

Responsive Webdesign ist eine Möglichkeit, Websites so zu entwickeln, dass sie auf verschiedenen Arten von Geräten und Bildschirmgrößen gut funktionieren. Anstatt mehrere Versionen einer Website für verschiedene Geräte erstellen zu müssen, nutzt Responsive Design flexible Raster und Layouts, Medienabfragen und flüssige Bilder, um das Benutzererlebnis auf allen Plattformen zu verbessern.

Warum ist Responsive Webdesign wichtig?

Da immer mehr Menschen auf der ganzen Welt Mobiltelefone und Tablets zum Surfen im Internet nutzen, ist eine responsive Website keine Option mehr, sondern eine Notwendigkeit. Ein responsives Design sorgt für eine bessere Benutzerfreundlichkeit, da Verbraucher unabhängig vom verwendeten Gerät nahtlos auf Inhalte zugreifen können. Es verbessert auch das Benutzererlebnis, indem sichergestellt wird, dass Inhalte visuell kohärent und auf allen Geräten leicht lesbar sind. Dies kann Frustrationen reduzieren und die Interaktion fördern. Darüber hinaus macht Responsive Design Websites zukunftssicher und ermöglicht die Anpassung an neue Geräte, ohne dass umfangreiche Neugestaltungen erforderlich sind.

Heute werfen wir einen Blick auf die Grundlagen des responsiven Webdesigns und konzentrieren uns insbesondere auf zwei leistungsstarke CSS-Techniken: Flexbox und CSS Grid. Wir zeigen anhand einer einfachen Website mit bunten Kästchen und Zahlen, wie sich diese Layouts an unterschiedliche Bildschirmgrößen anpassen.

Eine kurze Geschichte des Responsive Webdesigns

Responsive Webdesign hat sich seit den Anfängen des Internets stark verändert. Medienabfragen, die Stile basierend auf Geräteeigenschaften wie Bildschirmgröße, Auflösung und Ausrichtung anwenden. wurden Anfang der 2000er Jahre eingeführt, Flexbox wurde 2012 eingeführt und CSS Grid wurde 2017 eingeführt. Diese Innovationen haben es Designern ermöglicht, anpassbare Layouts auf einer Reihe verschiedener Geräte zu erstellen und so den Benutzern ein besseres Erlebnis zu bieten.

Responsive Layouts mit CSS Grid und Flexbox erstellen

Schauen wir uns nun einige praktische Beispiele an, die uns zeigen, wie Flexbox und CSS Grid funktionieren.

Responsives Rasterlayout: Farbraster

Wir erstellen ein einfaches Layout mit CSS Grid.

HTML für Rasterlayout:

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

HTML:

• Das HTML-Markup erstellt einen responsiven Container (Grid-Container) und bunte Boxen (Grid-Item) mit unterschiedlichen Zahlen und Hintergrundfarben. Das Viewport-Meta-Tag ermöglicht die Skalierung des Layouts auf verschiedenen Geräten.

CSS für Rasterlayout:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:

• Das CSS für das Rasterlayout verwendet verschiedene Rastereigenschaften, um eine bessere Reaktionsfähigkeit zu gewährleisten. Die Anzeige: Raster; Die Deklaration legt das Element mit der Klasse Grid-Container als Grid-Container fest, sodass wir alle Vorteile nutzen können, die Grids zu bieten haben. Die Rastervorlagenspalten: wiederholen(auto-fit, minmax(100px, 1fr)); Die Eigenschaft definiert, wie die Spalten im Raster strukturiert sind: Sie passt die Anzahl der Spalten automatisch an den verfügbaren Platz an, wobei jede Spalte eine Mindestbreite von 100 Pixeln und maximal 1 Bruchteil (1fr) des verfügbaren Platzes hat. Dieses Design ermöglicht die Anpassung des Gitters an unterschiedliche Bildschirmgrößen, sodass die Gitterelemente nicht überlaufen oder unschöne Lücken entstehen. Die Lücke: 10px; Die Eigenschaft wendet einen einheitlichen Abstand auf die Rasterelemente an. Zuletzt stapeln wir die Grid-Item-Elemente mit display:flex; und zentrieren Sie ihren Inhalt mit justify-content: center; und align-items: center. Auf diese Weise ist jeder Artikel gut organisiert und ausgewogen.

Beispiel für Responsive Webdesign: Rasterlayout

Dieses Rasterlayout verwendet:

1. Dynamische Spaltenanzahl: Das Raster passt die Anzahl der Spalten automatisch an die Breite des Ansichtsfensters an, wobei Elemente mindestens 100 Pixel einnehmen.
2. Flexible Größenanpassung: Durch die automatische Anpassung können die Boxen bei Bedarf angepasst und neu angeordnet werden, sodass alles besser organisiert aussieht.
3. Medienabfragen: Obwohl hier nicht wirklich beschrieben, veranschaulicht die Art und Weise, wie sich die Rasterelemente bei unterschiedlichen Bildschirmgrößen verhalten, das Konzept von Medienabfragen durch die Verwendung responsiver Rastereigenschaften.

Responsives Flexbox-Layout: Farbreihe

Als nächstes erstellen wir mit Flexbox eine einfache Reihe farbiger Kästchen.

HTML für Flexbox-Layout:

    
    
    
    


    

        
1
        
2
        
3
        
4
    

HTML:

• Ähnlich wie im Rasterbeispiel erstellt der HTML-Code hier einen Flex-Container mit Flex-Item-Boxen, die farbige Zahlen anzeigen.

CSS für Flexbox-Layout:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:
Das CSS verwendet hier Flexbox-Eigenschaften, um ein responsives Layout zu erstellen, das sich an verschiedene Bildschirmgrößen anpasst. Das Display: Flex; im .flex-container gibt seinen untergeordneten Elementen oder (Flex-Elementen) Flexbox-Funktionalitäten. Der Flex-Wrap: Wrap; Mit der Eigenschaft können Elemente auf mehrere Zeilen verteilt werden, wenn die Breite des Containers überschritten wird. Der justify-content: center; Die Eigenschaft zentriert die Flex-Elemente entlang der Hauptachse, sodass unabhängig von der Anzahl der Elemente ein ausgewogenes Layout entsteht. Die Lücke: 10px; Die Eigenschaft sorgt für einen gleichmäßigen Abstand zwischen den Elementen und verbessert so die Gesamtorganisation. Jedes .flex-Element ist auch ein Flex-Container mit display: flex; um eine weitere Ausrichtung des inneren Inhalts zu ermöglichen, der mithilfe von justify-content: center; sowohl vertikal als auch horizontal zentriert wird; und align-items: center;. Die festen Höhenabmessungen: 100px; und Breite: 100px; sorgen für Einheitlichkeit, während die Kombination dieser Eigenschaften dem Layout ein angenehmes Aussehen verleiht und sich gleichzeitig an die Bedürfnisse verschiedener Geräte anpasst.

Beispiel für Responsive Webdesign: Flexbox-Layout

Dieses Flexbox-Layout weist mehrere responsive Designmerkmale auf.

1. Flex Wrapping: Das Flex-Wrap: Wrap; Die Eigenschaft sorgt dafür, dass Boxen in die nächste Zeile verschoben werden, wenn sie nicht in die Zeile passen, und passen sie sich so an unterschiedliche Ansichtsfensterbreiten an.
2. Zentrierte Elemente: Elemente bleiben unabhängig von der Bildschirmgröße zentriert, wodurch die Gesamtdarstellung verbessert wird.
3. Feste Abmessungen: Die Boxen haben eine bestimmte Größe, aber sie werden je nach verfügbarem Platz umwickelt und neu angepasst, was ein reaktionsfähiges Layout ermöglicht.

Vergleich von CSS Grid und Flexbox

Wenn es um Layout-Design in CSS geht, sind Grid und Flexbox beide gute Möglichkeiten, aber sie dienen unterschiedlichen Zwecken. CSS Grid ist ein zweidimensionales Layoutsystem, mit dem Sie komplexe Rasterstrukturen mit Zeilen und Spalten erstellen können. Es eignet sich daher ideal für Layouts, bei denen eine präzise Kontrolle über beide Dimensionen erforderlich ist, beispielsweise in Webanwendungen oder Dashboards. Andererseits ist Flexbox ein eindimensionales Layoutmodell, das den Raum am besten entlang einer einzelnen Achse verteilt – entweder horizontal oder vertikal – und sich daher perfekt für einfachere Layouts oder kleinere Komponenten wie Schaltflächen oder Navigationsmenüs eignet. Während Sie Grid vielleicht für ein umfassendes, strukturiertes Layout wählen, bei dem Elemente über beide Achsen ausgerichtet werden müssen, wäre Flexbox Ihre erste Wahl für ein adaptives, flüssiges Layout, das auf die Inhaltsgröße reagieren muss. Letztendlich sollte Ihre Wahl von den spezifischen Anforderungen Ihres Projekts abhängen; Oftmals können Sie die besten Ergebnisse erzielen, wenn Sie beide zusammen und ergänzend verwenden.

Abschluss

Mit CSS Grid und Flexbox können Sie anpassbare Layouts erstellen, die auf jedem Gerät großartig aussehen. Diese Beispiele veranschaulichen, wie einfach es sein kann, dynamische Designs umzusetzen.

Jetzt bist du dran! Experimentieren Sie mit diesen Techniken, ändern Sie die Farben und Layouteinstellungen und sehen Sie, wie einfach es ist, unterhaltsame und ansprechende Designs zu erstellen.
``
Quellen:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/responsive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=Für einen wichtigen Layoutstil, hilfreich bei der Arbeit mit Zeilen.