Hallo Darelius,

Vielleicht habe ich einfach das "Grundprinzip" von CSS nicht verstanden

Das kann sein. CSS besteht aus 2 Teilen:

• Auswählen, für welche Elemente ein Satz von Eigenschaften gelten soll (der Selektor)
• Festlegen der Eigenschaften, die den HTML Elementen zugewiesen werden sollen, auf die der Selektor zutrifft. Das sind VIELE, aus den unterschiedlichsten Gebieten. Hinzu kommt, dass es nicht nur die einzelnen Eigenschaften gibt, sondern auch Shorthand-Eigenschaften, mit denen man mehrere Einzeleigenschaften auf einmal setzen kann.

Eigenschaften festlegen kannst Du auch mit dem style-Attribut in HTML, das macht man aber nur in Ausnahmefällen, weil es das HTML aufbläht und der Idee widerspricht, Inhalt und Layout zu trennen.

Wie eine CSS Regel grundsätzlich aussieht, haben wir hier beschrieben. Möglicherweise ist das bereits zu viel auf einmal…

Wichtig ist, dass eine Regel aus einem Selektor besteht (welche Elemente sollen Eigenschaften erhalten) und einem Eigenschaftenblock (welche Eigenschaften sollen zugewiesen werden).

In Gunnars Beispiel werden darüber hinaus noch @media-Abfragen und CSS-Schachtelungen verwendet. Wenn man die mal weglässt, legt Gunnar folgendes fest (im Fall, dass die Anzeige mindestens 30em breit ist):

body {
	font: 1.2em/1.4 Calibri, sans-serif;
	margin: 0;
	height: 100vh;
	
	display: grid;
	grid-template:
		'logo header' 8em
		'nav  main'   1fr
		/8em  1fr;
}

Diese Regel verwendet den Selektor body. Normale Namen werden als HTML Elementnamen gedeutet, d.h. die Regel gilt für alle Elemente mit dem Namen (oder Typ) body. Deswegen heißt das auch Typselektor

• margin:0 verstehst Du sicherlich. Warum das gesetzt wird, kommt gleich.
• height:100vh verwendet die Maßeinheit vh, mit der man einen Prozentanzeil der Viewport-Höhe angibt. 100vh = 100% der Höhe des Anzeigebereichs. Der Body hat standardmäßig 8px Margin, das würde der height-Angabe hinzugeschlagen und bei height:100vh zu einem vertikalen Scrollbar führen. Deshalb wird der Rand mit margin:0 entfernt.
• font: 1.2em/1.4 Calibri, sans-serif ist etwas komplizierter. font ist eine Shorthand-Eigenschaft, die mehrere andere Eigenschaften auf einmal setzt. Die minimale Angabe ist font-size und font-family. Optional kann direkt hinter der font-size noch die line-height angegeben werden, in Form eines Schrägstrichs und des Wertes für die Zeilenhöhe. Weitere Angaben sind möglich, als Schlüsselwörter vor der font-size, aber das ist hier nicht der Fall. Diese Zeile setzt also font-size auf 1.2em, line-height auf 1.4 (was 140% der font-size bedeutet) und als font-familiy wird Calibri, sans-serif eingestellt. Heißt: Wenn Calibri da ist, nimm die. Andernfalls nimm die Schrift, die im Browser als Default für serifenlose Schrift eingestellt ist.
• display:grid: Die display-Eigenschaft legt das Anzeigemodell für ein Element fest. Klassische Modelle sind inline und block, es gibt aber viel mehr. Grid ist eins davon, der Body soll als Raster angezeigt werden. WIE dieses Raster aussieht und welche Elemente wo im Raster zu finden sein sollen, muss zusätzlich festgelegt werden.
• grid-template: ...: Ist wieder eine Shorthand-Eigenschaft. Sie bündelt grid-template-columns (Spalteneinteilung des Rasters), grid-template-rows (Zeileneinteilung) und grid-template-areas (Rasterzellen Namen geben). Die Shorthand-Eigenschaft funktioniert so, dass man das Grid "malt". In den Zeichenketten wird für jede Zelle ein Name vergeben (oder ein Punkt, wenn eine Zelle unbenannt bleiben soll). Jede Zeichenkette legt eine Zeile fest, und dahinter steht die Höhe, die diese Zeile haben soll. Die erste Zeile ist 8em hoch, die zweite Zeile 1fr. fr? Kommt gleich! Hinter den Zeilenangaben folgt ein Schrägstrich und die Definition der Spalten. Gunnar legt 2 Spalten fest, die erste mit 8em, die zweite mit 1fr.
• fr ist eine Einheit speziell für Grids, damit kann ich angeben, welcher Anteil des noch nicht verbrauchten Platzes für diese Zeile oder Spalte verwendet werden soll. Wenn ich z.B. eine Spaltenangabe mit "8em 1fr 3fr" mache, ist die erste Spalte 8em breit. Die Spalten 2 und 3 füllen den Rest auf und haben ein Breitenverhältnis von 1:3.

Das war jetzt viel Zeug in nur einer CSS Regel. Aber der Rest ist einfacher. Benannte Grid-Bereiche ermöglichen es mir, Elemente relativ einfach zu platzieren. Das tut Gunnar bspw. in der Regel in Zeile 25:

body > img {
   grid-area: logo;
   ...
}

Der Selektor body > img besteht aus zwei Typselektoren (body und img, die durch den Kombinator > verbunden sind. > bedeutet: „direkter Nachfahre von“. Dieser Selektor ermittelt also in body Elementen diejenigen img Elemente, die direktes Kindelement davon sind. Diesen Bildern wird die Eigenschaft grid-area:logo zugewiesen, und das heißt: Zeige sie in dem Rasterfeld an, das ich mit logo benamst habe.

Das ist eine sehr einfache Anwendung von Grid, dieses Layoutmodell kann noch viel mehr.

Rolf