grid

Ein Layout in Tabellenform

1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
Kurzform: grid-gap: y x;
grid-gap: 20px 100px;
grid-gap: 20px; (column und row)
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9


veringern Sie die Werte der Eigenschaft: grid-template-columns: 50px 50px 50px (bsp.)
justify-content:
space-evenly > Gleicher Abstand zwischen den Zeilen und zum Rand (vertikal)
space-around > Gleicher Abstand zwischen den Zellen und zwischen den jeweils äußeren Elementen zum Rand
space-between > Die äußeren Elemente haben keinen Abstand zum Rand, der Abstand zwischen den innenliegenden Elementen ist gleich
center > Alle Elemente sind innen zentriert
start > Alle Elemente sind linksbündig
end > Alle Elemente sind rechtsbündig



Geben Sie dem grid-containerer die Eigenschaft: height, die größer ist als die aller grid-items
align-content:
space-evenly > Gleicher Abstand zwischen den Zeilen und zum Rand (horizontal)
space-around > Gleicher Abstand zwischen den Zellen und zwischen den jeweils äußeren Elementen zum Rand
space-between > Die äußeren Elemente haben keinen Abstand zum Rand, der Abstand zwischen den innenliegenden Elementen ist gleich
center > Alle Elemente sind innen zentriert
start > Alle Elemente sind oben angeordnet
end > Alle Elemente sind unten angeordnet




nochmal einen Schritt zurück: Anordnung der grids und Verbinden von grids

1: grid-row: 2
2
3
4
5
6
7: grid-column-start:2;
grid-column-end:4;
grid-row: 3>ohne wäre die Zeile voll!
8
9
















Verbinden von Zeilen und Spalten

1
2
3
4
5
6
7
8
9
















Übungen gleich volles Programm :)
Verändern Sie lediglich den CSS-Teil

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21




Ergebnis/ Ziel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21























Weitere Möglichkeit mit dem Grid Layout

header
nav
article




aside
footer



header
nav
article




aside
footer