CSS – Grid Layout

1. Was ist CSS Grid?

CSS Grid ist ein Layoutsystem, mit dem HTML-Elemente in Zeilen und Spalten angeordnet werden können.

Grid eignet sich besonders für Webseitenlayouts, Bildergalerien, Dashboards und Kartenübersichten.

2. Grid aktivieren

Mit display: grid wird ein HTML-Element zu einem Grid-Container.

HTML-Code

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

CSS-Code

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

Ergebnis

3. grid-template-columns

Mit grid-template-columns wird festgelegt, wie viele Spalten ein Grid besitzt und wie breit diese sind.

Zwei Spalten

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

Drei Spalten

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

4. Die Einheit fr

Die Einheit fr steht für einen Anteil des verfügbaren Platzes im Grid-Container.

Beispiel

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

Die zweite Spalte erhält doppelt so viel des verteilbaren Platzes wie die erste Spalte.

5. Feste und flexible Spalten

Feste Größen wie px können mit flexiblen Größen wie fr kombiniert werden.

CSS-Code

.container {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
}

Ergebnis

6. Die Funktion repeat()

Mit repeat() können sich wiederholende Spaltendefinitionen vereinfacht werden.

Ohne repeat()

grid-template-columns: 1fr 1fr 1fr;

Mit repeat()

grid-template-columns: repeat(3, 1fr);

Beide Schreibweisen erzeugen drei gleich große flexible Spalten.

7. grid-template-rows

Mit grid-template-rows können die Höhen expliziter Grid-Zeilen festgelegt werden.

CSS-Code

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 60px 110px;
}

Ergebnis

8. gap – Abstand zwischen Grid-Elementen

Mit gap wird der Abstand zwischen Zeilen und Spalten festgelegt.

CSS-Code

.container {
    display: grid;
    gap: 20px;
}

Alternativ können row-gap und column-gap getrennt verwendet werden.

.container {
    row-gap: 10px;
    column-gap: 25px;
}

9. grid-column

Mit grid-column wird bestimmt, über welche Spalten sich ein Grid-Element erstreckt.

CSS-Code

.breit {
    grid-column: span 2;
}

Ergebnis

10. grid-row

Mit grid-row kann ein Element über mehrere Zeilen angeordnet werden.

CSS-Code

.hoch {
    grid-row: span 2;
}

Ergebnis

11. Grid-Linien verstehen

CSS Grid verwendet nummerierte Linien, um Elemente zu positionieren.

Bei drei Spalten gibt es vier vertikale Begrenzungslinien.

Beispiel

.element {
    grid-column: 1 / 3;
}

Das Element beginnt an Linie 1 und endet an Linie 3. Es belegt damit zwei Spalten.

12. minmax()

Mit minmax() können Mindest- und Höchstgrößen für Grid-Spalten definiert werden.

CSS-Code

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

Die Spalten besitzen eine Mindestbreite von 150px und können flexibel wachsen.

13. auto-fit und responsive Grid

Mit auto-fit kann die Anzahl der Spalten automatisch an den verfügbaren Platz angepasst werden.

CSS-Code

.container {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 180px), 1fr)
        );
    gap: 15px;
}

Ergebnis

14. align-items

Mit align-items wird festgelegt, wie die Grid-Elemente innerhalb ihrer Bereiche entlang der Blockachse ausgerichtet werden.

CSS-Code

.container {
    display: grid;
    align-items: center;
}

Ergebnis

15. justify-content

Mit justify-content kann das gesamte Spaltenraster innerhalb des Containers entlang der Inline-Achse ausgerichtet werden, wenn freier Platz vorhanden ist.

CSS-Code

.container {
    display: grid;
    grid-template-columns:
        repeat(3, 70px);
    justify-content: center;
}

Ergebnis

16. grid-template-areas

Mit grid-template-areas können benannte Bereiche innerhalb eines Layouts definiert werden.

Diese Technik eignet sich besonders für komplette Webseitenlayouts.

CSS-Code

.seite {
    display: grid;

    grid-template-columns:
        170px minmax(0, 1fr);

    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

Ergebnis

17. Flexbox und Grid im Vergleich

18. Praktisches Beispiel: Kartenübersicht

Mit CSS Grid können mehrere Karten automatisch in Spalten angeordnet werden.

HTML-Code

<div class="karten">
    <article class="karte">
        <h3>HTML</h3>
        <p>Struktur einer Webseite</p>
    </article>

    <article class="karte">
        <h3>CSS</h3>
        <p>Design und Layout</p>
    </article>

    <article class="karte">
        <h3>PHP</h3>
        <p>Serverseitige Programmierung</p>
    </article>
</div>

CSS-Code

.karten {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 220px), 1fr)
        );
    gap: 18px;
}

.karte {
    background: white;
    padding: 22px;
    border-radius: 12px;
    border: 1px solid #dce6f3;
}

Ergebnis

19. Interaktives Beispiel: Spalten ändern

Mit den folgenden Schaltflächen können Sie die Anzahl der Grid-Spalten verändern.

Dieses Beispiel zeigt, wie sich die Anordnung durch grid-template-columns verändert.

20. Praktische Übungen

display: grid;

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

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

.container {
    display: grid;
    gap: 20px;
}

grid-template-columns: 1fr 2fr;

.element {
    grid-column: span 2;
}

.element {
    grid-row: span 2;
}

.container {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(100%, 200px), 1fr)
        );
}

.seite {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

21. Zusammenfassung

CSS Grid ermöglicht die Gestaltung von zweidimensionalen Layouts. Mit grid-template-columns und grid-template-rows werden Spalten und Zeilen definiert.

Mit gap werden Abstände festgelegt. grid-column und grid-row bestimmen, über wie viele Spalten und Zeilen sich Elemente erstrecken.

Für flexible Layouts sind repeat(), minmax() und auto-fit besonders hilfreich. Mit grid-template-areas können komplette Webseiten strukturiert werden.