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

[selfhtml_user_24102020]

Hallo!

Wahrscheinlich ist es ganz einfach, aber ich weiß nicht, wie ich es machen muß.🤔

Ich habe folgendes Grid Layout in meiner main.css:

body {
		 display: grid;
		 grid-template-columns: 20% 60% 20%;  
		 grid-template-rows: auto auto auto;  
		 background-color: black;
		 }

header {
			 grid-column: 1 / span 3;  
			 grid-row: 1;  
			 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;
		 }

footer {
			 grid-column: 1 / span 3;  
			 grid-row: 3;
			 color: Cyan;
			 background-color: black;
			 text-align: center;
			 }

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?

Gruß Jürgen