CSS Grid – Einfaches Erstellen komplexer Layouts

Vorlesung 15: CSS-Raster – Einfaches Erstellen komplexer Layouts

In dieser Vorlesung tauchen wir in CSS Grid ein, ein leistungsstarkes 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 als 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:

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

.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 10 Pixel große Lücke zwischen den Zellen besteht.

3. Rasterbereiche definieren

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

Beispiel:

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>

.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 automatisches Ausfüllen für Responsive Grids

Einer der besten Aspekte von CSS Grid ist, wie einfach es ist, es responsive zu machen. 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 150px breit ist. Wenn zusätzlicher Platz vorhanden ist, werden die Spalten gedehnt, 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 innerhalb ihrer Rasterzellen vertikal 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:

<div class="grid-container">
    <div class="item">
        <div class="nested-grid">
            <div class="nested-item">Nested 1</div>
            <div class="nested-item">Nested 2</div>
        </div>
    </div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.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 man sie jeweils verwenden sollte

• 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.

Fazit

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

Das obige ist der detaillierte Inhalt vonCSS Grid – Einfaches Erstellen komplexer Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!