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

[einsiedler]

Zur Teilfrage 2a) inline-size

Nun das Skip - Menü intern etwas konkreter:

<nav id="skip-to-section" aria-labelledby="skip-to-section-label" class="skip-navi-intern">
		<p id="skip-to-section-label" class="visually-hidden">Section - Skip</p> 
		<details class="site-navigation">
			<summary class="site-navigation-header">
				Site-Navigation
			</summary>					
			<ul class="section-skiplinks">
				<li><a href="#blogartikel05">30-07-2024<span>18:00 Uhr</span></a></li>
				<li><a href="#blogartikel04">28-07-2024<span>16:45 Uhr</span></a></li>
				<li><a href="#blogartikel03">20-06-2024<span>11:25 Uhr</span></a></li>
				<li><a href="#blogartikel02">18-06-2024<span>16:30 Uhr</span></a></li>
				<li><a href="#blogartikel01">16-06-2024<span>11:20 Uhr</span></a></li>
			</ul>
		</details>
</nav>

Sollte es so einfach sein das wenn man der nav ein display flex mitgibt + einem justify-content center und dem details meinetwegen ein width mit 80%, das ich so die Breite des Elementes beeinflusse? Wäre das in meinem Fall so korrekt?

Wen ich allerdings noch die Hintergrundfarbe die ich jetzt dem nav gegeben hab dem details mitgebe, würde es mir sogar gefallen.

Ist es etwa so einfach?

Aber wie mache ich es hier beim Subheader?

<header class="subheader">
	<hgroup>
						<h2>The Walking Dead: <span>Dead City</span></h2>
						<p><span>Who's There?</span> - <span>25. Juni 2023</span></p>
			
			<div>
						<p class="blogpost"><span>Posting vom</span> 18-06-2023 -- 16:30 Uhr -- Admin</p>
						<ul>
							<li class="tags"><a href="https://www.facebook.com/hashtag/TheWalkingDead">#TheWalkingDead</a><a href="https://www.facebook.com/hashtag/DeadCity">#DeadCity</a><a href="https://www.facebook.com/hashtag/Negan">#Negan</a></li>
						</ul>
			</div>
   </hgroup>
</header>

klar, die Klasse .subheader bekommt ein display flex mit + einem justify-content center , der hgroup ein width 80%? T.