Vorlesung 15: CSS-Raster – Einfache Erstellung komplexer Layouts

In dieser Vorlesung beschäftigen wir uns mit CSS Grid, einem leistungsstarken Layoutsystem, das Ihnen die vollständige Kontrolle über Zeilen und Spalten gibt. Während sich Flexbox hervorragend für eindimensionale Layouts (entweder Zeilen oder Spalten) eignet, können Sie mit Grid zweidimensionale Layouts verarbeiten, sodass Sie ganze Webseitenlayouts präzise entwerfen können.

1. Was ist CSS Grid?

CSS Grid Layout, allgemein bekannt als Grid, ist ein 2D-Layoutsystem, das für die gleichzeitige Verwaltung von Zeilen und Spalten entwickelt wurde. Sie können es sich wie eine Matrix oder eine Tabelle vorstellen, in der jedes Element in Rasterzellen platziert wird, was saubere und organisierte Layouts ermöglicht.

2. So erstellen Sie ein Raster

Um Grid zu verwenden, müssen Sie einen Container als Raster definieren, indem Sie display: grid festlegen. Anschließend definieren Sie die Anzahl der Zeilen und Spalten mithilfe der Eigenschaften „grid-template-rows“ und „grid-template-columns“.

Beispiel:

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

Dadurch wird ein 2x2-Raster erstellt, wobei jede Zelle 100 x 100 Pixel groß ist und eine Lücke von 10 Pixeln zwischen den Zellen besteht.

3. Rasterbereiche definieren

Sie können mithilfe der Eigenschaft „grid-area“ auch bestimmte Rasterbereiche definieren, die Elemente belegen sollen. Dadurch können Sie genau steuern, wo ein Element im Raster platziert wird.

Beispiel:

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

In diesem Beispiel wird ein Grundlayout erstellt, bei dem sich die Kopf- und Fußzeile über zwei Spalten erstrecken und die Seitenleiste und der Hauptinhalt jeweils eigene Spalten belegen. Mit der Eigenschaft „grid-template-areas“ können Sie die Struktur des Rasters mit Namen für jeden Bereich definieren.

4. Automatische Anpassung und automatische Füllung für Responsive Grids

Einer der besten Aspekte von CSS Grid ist, wie einfach es ist, es responsive zu gestalten. Die Eigenschaften „Auto-Fit“ und „Auto-Fill“ können die Anzahl der Spalten basierend auf dem verfügbaren Platz automatisch anpassen.

Beispiel:

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

In diesem Beispiel erstellt das Raster automatisch so viele Spalten, wie in den Container passen, wobei jede Spalte mindestens 150 Pixel breit ist. Wenn zusätzlicher Platz vorhanden ist, werden die Spalten gestreckt, um den verbleibenden Bereich auszufüllen.

5. Rasterausrichtung

Sie können Elemente innerhalb des Rasters mit justify-items und align-items ausrichten.

• justify-items: Richtet Elemente horizontal innerhalb ihrer Rasterzellen aus.
• align-items: Richtet Elemente vertikal innerhalb ihrer Rasterzellen aus.

Beispiel:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

Dadurch werden alle Elemente sowohl horizontal als auch vertikal innerhalb ihrer Rasterzellen zentriert.

6. Verschachtelte Gitter

CSS Grid unterstützt auch verschachtelte Raster, sodass Sie Raster innerhalb von Rasterelementen für komplexere Layouts erstellen können.

Beispiel:

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

In diesem Beispiel enthält eines der Rasterelemente ein verschachteltes Raster, das flexiblere und detailliertere Layouts ermöglicht.

7. Grid vs. Flexbox: Wann jeweils zu verwenden

• Verwenden Sie Flexbox, wenn Sie das Layout von Elementen in einer Richtung (entweder Zeilen oder Spalten) verwalten müssen.
• Verwenden Sie Raster, wenn Sie für komplexe, mehrdimensionale Layouts sowohl Zeilen als auch Spalten gleichzeitig verwalten müssen.

Abschluss

CSS Grid revolutioniert das Webdesign und bietet eine leistungsstarke Möglichkeit, mit minimalem Aufwand komplexe und reaktionsfähige Layouts zu erstellen. Egal, ob Sie an einem Blog-Layout, einem Dashboard oder einer Website-Struktur arbeiten, Grid gibt Ihnen die Flexibilität, sowohl Zeilen als auch Spalten problemlos zu steuern.

Folgen Sie mir auf LinkedIn

Ridoy Hasan