zurück zur absoluten Positionierung mit Prozent / Zum zum strukturierten Vorgehen bei Flex-Boxen / Zur Startseite

CSS Grid-Möglichkeiten

externe Links zu CSS/Grid-Themen

Beispiele

mit fixen Angaben (grid-container2)

display:grid;
grid-template-columns: 100px 50px 100px;
1
2
3
4

angepasst an Bildschirmbreite (grid-container2)

display:grid;
grid-template-columns: 100px auto auto;
1
2
3
4

fractional Units (grid-container3)

display:grid;
grid-template-columns: 1fr 2fr 1fr;
1
2
3
4

Kombinatio Fest und "fractional Units"(grid-container4)

display:grid;
grid-template-columns: 150px 2fr 1fr;
1
2
3
4

Repeat-Function (grid-container5)

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

Feste Höhen (grid-container6)

display:grid;
grid-template-rows: 50px 80px 100px;
1
2
3
4

Prozentuale Höhen (grid-container7)

klappt nur wenn wenn der container eine Höhe hat, zum Beispiel 300px

display:grid;
grid-template-rows: 25% 25% 50%;
height: 300px;
1
2
3

Fractions und feste Höhen (grid-container8)

klappt nur wenn wenn der container eine Höhe hat, zum Beispiel 300px

display:grid;
grid-template-rows: 40px 1fr 2fr;
height: 300px;
1
2
3

"auto" und feste Höhen (grid-container9)

klappt nur wenn wenn der container eine Höhe hat, zum Beispiel 300px

display:grid;
grid-template-rows: auto 35px auto;
height: 300px;
1
2
3

Auto-Repeat-funktionalität

grid-template-rows: repeat(3,40px);
1
2
3

Grid mit festen Werten

die Werte auf der linken seite des / sind "rows" und die rechts "columns"

display:grid;
grid-template: 50px 50px/150px 150px;
1
2
3
4

Grid mit festen Werten und fr-Werten

display:grid;
grid-template: 50px 50px/1fr 1fr;
1
2
3
4

Grid mit gemischten Werten

display:grid;
grid-template: 60% auto/2fr 1fr;
height: 120px;
1
2
3
4

Mehr als zwei Zeilen

display:grid;
grid-template: 1fr 1fr 1fr/60% auto;
height: 200px;
1
2
3
4
5
6

row-Gaps

display:grid;
grid-template-columns: 1fr 2fr 1fr;
row-gap: 20px;
1
2
3
4
5
6
7
8

column-Gaps

display:grid;
grid-template-columns: 1fr 2fr 1fr 1fr;
column-gap: 20px;
1
2
3
4
5
6
7
8

Gap-Shorthand

in diesem Beispiel 30px zwischen Zeilen und 10px zwischen den Spalten

display:grid;
grid-template-columns: 1fr 2fr 1fr 1fr;
gap: 30px 10px;
1
2
3
4
5
6
7
8

Gap-Shorthand mit identischen Werten für Spalten und Zeilen

in diesem Beispiel 20px zwischen Zeilen und Spalten (kurzversion bekannter Vorgehensweisen)

display:grid;
grid-template-columns: 1fr 2fr 1fr 1fr;
gap: 20px;
1
2
3
4
5
6
7
8

Span / Expand / Boxen über mehr als eine Zelle

Wie zu beweisen war

container: display: grid;
grid-template-columns: repeat(1, 3fr);
grid-template-rows: repeat(1, 3fr);
Ich bin Box 1 grid-column:span 2;
Ich bin Box 2 grid-column:span 1;
Ich bin Box 3 grid-row: span 2;
Ich bin Box 4

Named Areas

container:
display: grid;
grid-gap: 2px;
grid-template-areas: "item1 item2 item3";
Ich bin Box 1 - grid-area: item1
Ich bin Box 2 - grid-area: item2
Ich bin Box 3 - grid-area: item3

Named Areas - Span über mehrere Spalten

container:
display: grid;
grid-gap: 2px;
grid-template-areas: "item1 item1 item2";
Ich bin Box 1 - grid-area: item1
Ich bin Box 2 - grid-area: item2

Named Areas - Span über mehrere Spalten mit leeren Spalten

container:
display: grid;
grid-gap: 2px;
grid-template-areas: ". item1 . item2";
Ich bin Box 1 - grid-area: item1
Ich bin Box 2 - grid-area: item2

Named Areas - Multiple Rows

container:
display: grid;
grid-gap: 2px;
grid-template-areas:
"item1 item2"
"item3 item4";
Ich bin Box 1 - grid-area: item1
Ich bin Box 2 - grid-area: item2
Ich bin Box 3 - grid-area: item3
Ich bin Box 4 - grid-area: item4

kompleseres Beispiel

display: grid;
grid-gap: 5px;
grid-template-areas:
"header header header header"
"sidebar main main button"
"sidebar photo photo button"
"footer footer footer footer";
Ich bin Header - grid-area: header
Ich bin Sidebar - grid-area: sidebar
Ich bin Main - grid-area: main
Ich bin der Button - grid-area: photo
Ich bin das Photo - grid-area: button
Ich bin der Footer - grid-area: footer