Antwort an „einsiedler“ verfassen

Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

einsiedler 11.03.2024 22:58 (Versionen)

css
html

Zu Deiner idee:

Du meinst also als oberstes Raster in etwa so:

body {
		height:100vh;
		display grid;
		grid-template-rows: 1fr 1fr; 
		grid-template-columns: 1fr 16em;
	}
	
header .main-head { 
  background: tomato; 
  grid-row: 1 / 2;
  grid-column:1 / 2; 
}

#navigations { 
  background: gold; 
  grid-row: 1 / 2;
  grid-column:2 / 2; 
}

main #main-content { 
  background: lightgreen; 
  grid-row: 2 / 2;
  grid-column: 1 / 2; 
}

Wäre das so richtig?

Oder etwa so:

html

<body id="skip-to-top" class=" ">

  <header class="main-head">			
	 <h1>Wandzeitung - <span>täglich Neuigkeiten</span></h1>		
	</header>
		
	<aside id="navigations">
		<nav id="main-nav" class="main-navi" aria-labelledby="mainnav-label">
				   ...
		</nav>
   </aside>

   <main id="main-content" class="main-content">

   </main>

body {
	display grid;
    height: calc(100vh - 16px);
				
		grid: 	"main-head navigations" auto
					  "main main" auto / auto; 									
		gap: 0;		
		}

		.main-head {
			grid-area: main-head;
		}
		
		.navigations {
			grid-area: navigations;
		}

		main #main-content{
			grid-area: main;
		}

Wie wäre es korrekter um da vorzugehen?

Oder müsste ich header und nav (ohne aside) mit einem div zusammenfassen?