Inhalte bei einem 3 spaltigen Grid Layout in der 1. und 3. Spalte hinterlegen

[Matthias Scharwies]

Servus!

Das bedeutet ich habe einen einzeiligen Header, eine einzeilige main und einen einzeiligen footer. In der 2. mittleren Spalte habe im Header u.a. meine Navigation, in der main meinen Content und im footer das Impressum usw. hinterlegt.

Jetzt möchte ich möglichst ohne JavaScript (darüber habe noch fast gar keine Kenntnisse) zum Beispiel in der 3. Spalte rechts neben dem main Content eine Sidebar oder irgend etwas anderes hinterlegen.

Wie stelle ich das an?

Nutze den Vorteil von grid Layout, das man gar nicht so viel Festlegungen braucht:

body {
		 display: grid;
		 grid-template-columns: 1fr 3fr 1fr;  
		 /* grid-template-rows: auto auto auto;   ist gar nicht nötig */
		 background-color: black;
		 }

header {
			 grid-column: 1 / span -1;     /* -1 = 1. von rechts, falls du mal ne Spalte einfügst, musst du nix mehr ändern! */
			/*_ grid-row: 1;   ist eh klar! */
			 background-color: black;
			 }

main {
		 grid-column: 2 / span 1;  
		 /* grid-row: 2; */  
		 background-color: white;
		 padding-top: 5px;
		 padding-right: 10px;
		 padding-left: 10px;
		 font-size: 21px;
		 line-height: 1.5em;
		 }

aside {
/* keine CSS-Festlegung nötig, wenn es im Markup hinter dem main-Element steht. */
}

Gruß Jürgen

Herzliche Grüße

Matthias Scharwies