IT-Kurs CSS-Grundlagen 031_Rasterlayout Grid

Rasterlayout Grid

Ein Raster besteht aus einer Reihe von horizontalen und vertikalen Linien, die ein Layoutmuster bilden. Basierend auf dem Raster können wir Designelemente anordnen, um uns beim Entwerfen einer Reihe von Seiten mit Elementen fester Position und Breite zu helfen, wodurch unsere Website-Seiten einheitlicher werden.

Ein Raster verfügt in der Regel über viele Spalten (columns) und Zeilen (rows) sowie Abstände zwischen Zeilen und Spalten, die im Allgemeinen als Rinnen (gutter) bezeichnet werden.

Beispieleffekt

Grundkonzepte

Das Grid-Layout besteht aus folgenden Grundkonzepten:

Grid-Container (grid container): Das Grid-Layout besteht aus Grid-Containern und Grid-Items. Der Grid-Container ist der Container, der Grid-Items im Raster platziert. Der Grid-Container kann jedes Element sein, üblicherweise wird jedoch das div-Element verwendet.
Grid-Item (grid item): Grid-Items sind Elemente, die im Grid-Container platziert werden. Grid-Items können beliebige Elemente sein, üblicherweise werden jedoch div-Elemente verwendet.
Grid-Linie (grid line): Grid-Linien sind Linien, die den Grid-Container in Zeilen und Spalten unterteilen. Grid-Linien können horizontale oder vertikale Linien sein.
Grid-Spalte (grid column): Grid-Spalten sind vertikale Linien im Grid-Container.
Grid-Zeile (grid row): Grid-Zeilen sind horizontale Linien im Grid-Container.

Häufig verwendete Eigenschaften

Grid-Container-Eigenschaften

Der Grid-Container verfügt über folgende Eigenschaften zur Steuerung des Grid-Layouts:

display: Legt den Anzeigemodus des Grid-Containers fest. Der Grid-Container muss auf display: grid oder display: inline-grid gesetzt sein, um das Grid-Layout zu verwenden.
grid-template-columns: Legt die Anzahl der Spalten und Spaltenbreiten des Grid-Containers fest (mit Einheiten wie fr, px, em usw.).
grid-template-rows: Legt die Anzahl der Zeilen und Zeilenhöhen des Grid-Containers fest (mit Einheiten wie fr, px, em usw.).
grid-template: Setzt gleichzeitig grid-template-columns und grid-template-rows.
grid-auto-columns: Legt die Spaltenbreiten des Grid-Containers fest.
grid-auto-rows: Legt die Zeilenhöhen des Grid-Containers fest.

Grid-Item-Eigenschaften

Grid-Items verfügen über folgende Eigenschaften zur Steuerung des Layouts von Grid-Items im Raster:

grid-column: Legt die Spalte fest, in der sich das Grid-Item befindet.
grid-row: Legt die Zeile fest, in der sich das Grid-Item befindet.
grid-column-start: Legt die Startposition des Grid-Items in der Spalte fest.
grid-column-end: Legt die Endposition des Grid-Items in der Spalte fest.
grid-row-start: Legt die Startposition des Grid-Items in der Zeile fest.
grid-row-end: Legt die Endposition des Grid-Items in der Zeile fest.
grid-area: Legt den Bereich fest, in dem sich das Grid-Item befindet.
grid-gap: Legt den Abstand zwischen Grid-Linien fest.

Rasterlayout

Festlegen von festen und adaptiven Spaltenbreiten und Zeilenhöhen

Beispiel:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 100px 200px auto;
4
    /* Erste Spalte 100px, zweite Spalte 200px, verbleibender Platz für adaptive Spalte */
5
    grid-template-rows: 100px 200px auto;
6
    /* Erste Zeile 100px, zweite Zeile 200px, verbleibender Platz für adaptive Zeile */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid-Demo</div>
3
        <div class="item">Grid-Demo</div>
4
        <div class="item">Grid-Demo</div>
5
        <div class="item">Grid-Demo</div>
6
        <div class="item">Grid-Demo</div>
7
        <div class="item">Grid-Demo</div>
8
        <div class="item">Grid-Demo</div>
9
        <div class="item">Grid-Demo</div>
10
        <div class="item">Grid-Demo</div>
11
    </div>

Effekt:

Beispieleffekt Verwendung von Prozentsätzen zur Definition von Spaltenbreiten und Zeilenhöhen

Beispiel:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 2fr 1fr;
4
    /* Erste Spalte 30%, zweite Spalte zwei Teile des verbleibenden Platzes, dritte Spalte ein Teil des verbleibenden Platzes */
5
    grid-template-rows: 30% 2fr 1fr;
6
    /* Erste Zeile 30%, zweite Zeile zwei Teile des verbleibenden Platzes, dritte Zeile ein Teil des verbleibenden Platzes */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid-Demo</div>
3
        <div class="item">Grid-Demo</div>
4
        <div class="item">Grid-Demo</div>
5
        <div class="item">Grid-Demo</div>
6
        <div class="item">Grid-Demo</div>
7
        <div class="item">Grid-Demo</div>
8
        <div class="item">Grid-Demo</div>
9
        <div class="item">Grid-Demo</div>
10
        <div class="item">Grid-Demo</div>
11
    </div>

Effekt:

Beispieleffekt Gleichmäßige Aufteilung (durchschnittliche Zuteilung) von Spaltenbreiten und Zeilenhöhen

Beispiel:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Drei gleiche Spalten, jede Spalte nimmt ein Teil des verbleibenden Platzes ein */
5
    grid-template-rows: repeat(3, 1fr);
6
    /* Drei gleiche Zeilen, jede Zeile nimmt ein Teil des verbleibenden Platzes ein */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid-Demo</div>
3
        <div class="item">Grid-Demo</div>
4
        <div class="item">Grid-Demo</div>
5
        <div class="item">Grid-Demo</div>
6
        <div class="item">Grid-Demo</div>
7
        <div class="item">Grid-Demo</div>
8
        <div class="item">Grid-Demo</div>
9
        <div class="item">Grid-Demo</div>
10
        <div class="item">Grid-Demo</div>
11
    </div>

Effekt:

Beispieleffekt Verwendung von minmax zur Definition der minimalen und maximalen Breite und Höhe von Spalten und Zeilen

Beispiel:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
4
    /* Erste Spalte minimale Breite 100px, nimmt ein Teil des verbleibenden Platzes ein; zweite Spalte minimale Breite 200px, nimmt zwei Teile des verbleibenden Platzes ein */
5
    grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
6
    /* Erste Zeile minimale Höhe 100px, nimmt ein Teil des verbleibenden Platzes ein; zweite Zeile minimale Höhe 200px, nimmt zwei Teile des verbleibenden Platzes ein */
7
}
8
.item{
9
    margin: 10px;
10
    background-color: rgb(100, 150, 200);
11
}

1
    <div class="grid-example">
2
        <div class="item">Grid-Demo</div>
3
        <div class="item">Grid-Demo</div>
4
        <div class="item">Grid-Demo</div>
5
        <div class="item">Grid-Demo</div>
6
    </div>

Effekt:

Beispieleffekt

Rasterabstände

Rasterabstände werden durch die beiden Eigenschaften grid-row-gap und grid-column-gap gesteuert. Darüber hinaus wurde in CSS Grid Level 2 die gap-Eigenschaft eingeführt, die gleichzeitig grid-row-gap und grid-column-gap steuern kann.

Beispiel:

1
.grid-example{
2
    display: grid;
3
    grid-template-columns: 30% 30% 30%;
4
    grid-template-rows: 200px 200px;
5
    grid-row-gap: 50px; /* Zeilenabstand 50px */
6
    grid-column-gap: 30px; /* Spaltenabstand 30px */
7
    /* gap: 50px 30px; Zeilenabstand 50px, Spaltenabstand 30px */
8
}
9
.item{
10
    margin: 10px;
11
    background-color: rgb(100, 150, 200);
12
}

1
    <div class="grid-example">
2
        <div class="item">Grid-Demo</div>
3
        <div class="item">Grid-Demo</div>
4
        <div class="item">Grid-Demo</div>
5
        <div class="item">Grid-Demo</div>
6
        <div class="item">Grid-Demo</div>
7
        <div class="item">Grid-Demo</div>
8
    </div>

Effekt:

Beispieleffekt

Rasterpositionierung

Rasterpositionierung bezieht sich in der Regel auf die Verwendung von Eigenschaften wie grid-column, grid-row und grid-area zur Positionierung von Items im Grid-Layout. Diese Eigenschaften werden verwendet, um anzugeben, welche Spalten und Zeilen ein Item im Raster einnimmt, oder um direkt den Bereich anzugeben, in dem sich das Item befindet.

grid-column ist eine Eigenschaft zum Festlegen der Spalten, die ein Grid-Item überspannt. Es ist eine Abkürzung für grid-column-start und grid-column-end. Mit grid-column können Sie bequemer die Position und die Anzahl der überspannten Spalten eines Grid-Items in horizontaler Richtung definieren.
grid-row ist eine Eigenschaft zum Festlegen der Zeilen, die ein Grid-Item überspannt. Es ist eine Abkürzung für grid-row-start und grid-row-end. Mit grid-row können Sie bequemer die Position und die Anzahl der überspannten Zeilen eines Grid-Items in vertikaler Richtung definieren.
Die grid-area-Eigenschaft ist eine Abkürzungseigenschaft zum gleichzeitigen Festlegen der Eigenschaften grid-row-start, grid-column-start, grid-row-end und grid-column-end. Mit grid-area können Sie intuitiver die Position und Größe eines Grid-Items im Grid-Layout definieren.

Beispiel:

1
.example {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    /* Definiert 3 Spalten, jede Spalte nimmt 1 Teil Platz ein */
5
    grid-template-rows: repeat(2, 150px);
6
    /* Definiert 2 Zeilen, jede Zeile hat eine Höhe von 150px */
7
    gap: 10px;
8
    padding: 20px;
9
}
10
.item {
11
    background-color: #f2f2f2;
12
    padding: 20px;
13
    border: 1px solid #ddd;
14
    text-align: center;
15
}
16
/* Positionierung mit grid-column und grid-row */
17
.item1 {
18
    grid-column: 1 / 3; /* Von Spalte 1 bis Spalte 3 (1+2 Spalten) */
19
    grid-row: 1 / 2;    /* Von Zeile 1 bis Zeile 2 (1 Zeile) */
20
}
21
/* Positionierung mit grid-area */
22
.item2 {
23
    grid-area: 2 / 2 / 3 / 4; /* Von Zeile 2, Spalte 2 bis Zeile 3, Spalte 4 (2 Zeilen) (2+3 Spalten) */
24
}

1
<div class="example">
2
    <div class="item item1">Item 1</div>
3
    <div class="item item2">Item 2</div>
4
    <div class="item">Item 3</div>
5
    <div class="item">Item 4</div>
6
    <div class="item">Item 5</div>
7
    <div class="item">Item 6</div>
8
</div>

Effekt:

Beispieleffekt

Beispiel:

1
body {
2
    margin: 0;
3
    padding: 0;
4
}
5

6
.container {
7
    display: grid;
8
    grid-template-columns: 1fr 2fr;
9
    /* Definiert zwei Spalten, erste Spalte nimmt ein Teil, zweite Spalte nimmt zwei Teile */
10
    grid-template-rows: auto;
11
    /* Definiert Zeilenhöhe, erste und dritte Zeile Höhe wird durch Inhalt bestimmt, zweite Zeile nimmt verbleibenden Platz */
12
    grid-template-areas:
13
    "header header"
14
    "sidebar main"
15
    "footer footer";
16
    /* Definiert Bereichslayout, jeder Bereich wird durch eine Zeichenfolge dargestellt, Leerzeichen trennen Zellen, Zeilenumbruch stellt neue Zeile dar */
17
    min-height: 100vh;
18
    /* Setzt minimale Höhe, stellt sicher, dass footer auch bei Inhaltshöhe kleiner als Viewport sichtbar bleibt */
19
}
20

21
.header {
22
    grid-area: header;
23
    /* Platziert .header im Bereich namens "header" */
24
    background-color: #333;
25
    color: #fff;
26
    padding: 10px;
27
}
28

29
.sidebar {
30
    grid-area: sidebar;
31
    /* Platziert .sidebar im Bereich namens "sidebar" */
32
    background-color: #f2f2f2;
33
    padding: 10px;
34
}
35

36
.main {
37
    grid-area: main;
38
    /* Platziert .main im Bereich namens "main" */
39
    padding: 10px;
40
}
41

42
.footer {
43
    grid-area: footer;
44
    /* Platziert .footer im Bereich namens "footer" */
45
    background-color: #333;
46
    color: #fff;
47
    padding: 10px;
48
}

1
    <div class="container">
2
        <div class="header">Header</div>
3
        <div class="sidebar">Sidebar</div>
4
        <div class="main">
5
          <h1>Main Content</h1>
6
          <p>This is the main content area.</p>
7
        </div>
8
        <div class="footer">Footer</div>
9
    </div>

Effekt:

Beispieleffekt

Rasterlayout Grid

Grundkonzepte

Häufig verwendete Eigenschaften

Rasterlayout

Rasterabstände

Rasterpositionierung

Kommentare