Grid - Wie bewege die aside-Element
bearbeitet von Gunnar BittersmannHallo Joseba,
das hast Du falsch verstanden.
Die grid-template Eigenschaft fasst grid-template-areas, grid-template-rows und grid-template-columns zusammen.
Hier mal einzeln und mit kleinem Grid:
~~~css
grid-template-areas: "header header“
"nav nav"
"main werb"
"main info"
"footer footer";
grid-template-rows: auto auto 10em 1fr auto;
grid-template-columns: 1fr 30em;
~~~
In grid-template-areas stehen 5 Strings mit Namen, jeder String für eine Zeile im Grid. Und jeder String besteht aus zwei Namen, jeder für eine Spalte im Grid.
Ich zeige dir mal, wie sich grid-template aus Bausteinen zusammensetzt. Namen für Bausteine setze ich in [Klammern]:
grid-template: [zeilen] / [spalten];
[zeilen] = [zeile] [zeile] [zeile] ...
[zeile] = "[name] [name] [name]..." [höhe]
[spalten] = [breite] [breite] ...
Also: Ein grid-template besteht aus einem Zeilenteil, einem Schrägstrich und einem Spaltenteil.
Der Zeilenteil besteht aus Zeilen.
Eine Zeile ist ein String aus Namen und eine Höhe
Der Spaltenteil besteht aus Spaltenbreiten. Ich hätte in meinem Beispiel die Spaltenangaben besser in eine eigene Zeile geschrieben, damit es mehr wie eine Tabelle aussieht. Und ich füge mal ein paar Leerstellen ein, dann sieht man besser, wie alles zusammengehört:
~~~css
grid-template:
"header header header" auto
"nav nav nav" auto
"main main gap1" 1em
"main main werb" 10em
"main main gap2" 3em
"main main info" 1fr
"footer footer footer" auto
/ 8% 74% 18%;
~~~
Man muss das nicht so ordentlich hinschreiben. CSS versteht es auch, wenn alles hintereinander steht:
~~~css
grid-template: "header header header" auto "nav nav nav" auto "main main gap1" 1em "main main werb" 10em "main main gap2" 3em "main main info" 1fr "footer footer footer" auto / 8% 74% 18%;
~~~
Aber du und ich, wir verstehen es dann nicht mehr.
_Rolf_
--
sumpsi - posui - clusi
Grid - Wie bewege die aside-Element
bearbeitet von Rolf BHallo Joseba,
das hast Du falsch verstanden.
Die grid-template Eigenschaft fasst grid-template-areas, grid-template-rows und grid-template-columns zusammen.
Hier mal einzeln und mit kleinem Grid:
~~~css
grid-template-areas: "header header“
"nav nav"
"main werb"
"main info"
"footer footer";
grid-template-rows: auto auto 10em 1fr auto;
grid-template-columns: 1fr 30em;
~~~
In grid-template-areas stehen 5 Strings mit Namen, jeder String für eine Zeile im Grid. Und jeder String besteht aus zwei Namen, jeder für eine Spalte im Grid.
Ich zeige dir mal, wie sich grid-template aus Bausteinen zusammensetzt. Namen für Bausteine setze ich in [Klammern]:
grid-template: [zeilen] / [spalten];
[zeilen] = [zeile] [zeile] [zeile] ...
[zeile] = "[name] [name] [name]..." [höhe]
[spalten] = [breite] [breite] ...
Also: Ein grid-template besteht aus einem Zeilenteil, einem Schrägstrich und einem Spaltenteil.
Der Zeilenteil besteht aus Zeilen.
Eine Zeile ist ein String aus Namen und eine Höhe
Der Spaltenteil besteht aus Spaltenbreiten. Ich hätte in meinem Beispiel die Spaltenangaben besser in eine eigene Zeile geschrieben, damit es mehr wie eine Tabelle aussieht. Und ich füge mal ein paar Leerstellen ein, dann sieht man besser, wie alles zusammengehört:
~~~css
grid-template:
"header header header" auto
"nav nav nav" auto
"main main gap1" 1em
"main main werb" 10em
"main main gap2" 3em
"main main info" 1fr
"footer footer footer" auto
/ 8% 74% 18%;
~~~
_Rolf_
--
sumpsi - posui - clusi