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

Wir können "Zellen" benennen und als Area deklarieren. Über die Namen kann dann ganz einfach in den Regeln der Tabellen die Tabelle aufgebaut werden. "Namen" Vergeben für die Zellen
.item1 { grid-area: header; }
.item2 { grid-area: nav; }
.item3 { grid-area: article; }
.item4 { grid-area: aside; }
.item5 { grid-area: footer; }

.grid-container {
     display: grid;
     grid-template-areas:
/* Aufbau der Tabelle unter Verwendung der vergebenen "Namen"*/
         'header header header header header header'
         'nav article article article article aside'
         'footer footer footer footer footer footer';
<!-- mit einem . als grid-area können Freiräume erstellt werden) z.B.: nav . article article article aside -->

<div class="grid-container">
     <div class="item1">header</div>
     <div class="item2">nav</div>
     <div class="item3">article</div>
     <div class="item4">aside</div>
     <div class="item5">footer</div>
</div>



header
nav
article




aside
footer



header
nav
article




aside
footer