Beispiel:Grid-named-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

 <title>Benannte Rasterbereiche - 5</title>

<style> body { display: grid; gap: 0.5em; grid-template-areas: "head" "main" "nav" "news" "aside" "foot"; } @media (min-width: 35em) { body { 

   grid-template-columns: repeat(3, 1fr);
   grid-template-areas:

"head head head " "nav news aside" "main main main" "foot foot foot"; } } @media (min-width: 45em) { body { grid-template-columns: repeat(4, 1fr); grid-template-areas: "head head head head" "nav main main news" "nav main main aside" "foot foot foot foot"; grid-template-rows: 

 		min-content
 		1fr
 		1fr
 		min-content;

} nav { height: min-content; } }

header { grid-area: head; }

nav { grid-area: nav; }

article { grid-area: main; }

aside { grid-area: aside; }

  1. news {

grid-area: news; }

footer { grid-area: foot; }

header, nav, main, article, section, aside, footer { 

  border-radius: 0 0.5em 0.5em;
  border: medium solid;
  padding: 1em;

}

header { display: grid; grid-template-columns: 4em 1fr; gap: .5em;

img { width: 2.25em; aspect-ratio: 1/1; padding-top: 1.5em; } }

nav { background: #fffbf0; border-color: #e7c157; }

article { background: #ffede0; border-color: #df6c20; }

aside { background: #ebf5d7; border-color: #8db243; }

header, footer { background: #F1F3F4; border-color: #d5d5d5; }

footer * { 

 float: right;

clear: right; 

 margin: 0 0 1em;

}

body{ margin: 0 auto; max-width: 60em; min-height: 100dvh; font-family: sans-serif; }

</style>

</head>

<body> <header> <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="logo">

Responsive Grids - 5

</header>

<nav>

Navigation

  • <a href="#link_1.html">Startseite</a>
  • <a href="#link_2.html">Unterseite 1</a>
  • <a href="#link_3.html">Unterseite 2</a>
  • <a href="#link_4.html">Kontakt</a>

</nav> <aside id="news">

Viewport-Emulator

Teste das Layout, indem du die Breite des Browserfensters veränderst!

</aside> <article>

Media Queries

body {
	display: grid;
	gap: 0.5em;
	grid-template-areas:
	  "head"
	  "main"
	  "nav"
	  "news"
	  "aside"
	  "foot";
}
@media (min-width: 35em) { 
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
		"head head head "
		"nav  news aside"
		"main main main" 
		"foot foot foot";		
}
@media (min-width: 45em) { 
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: 
    "head head head head"
    "nav  main main news"
    "nav  main main aside" 
    "foot foot foot foot";
}

Im Mobile first! werde alle Elemente untereinander dargestellt – allerdings wird die Navigation nach unten geschoben, damit der Hauptinhalt sicher im Viewport ist.

Sobald der Viewport breit genug ist, wird das 3-Spalten-Layout; später sogar ein 4-Spalten-Layout dargestellt.

</article> <aside>

Weiterführende Links

</aside> <footer> <a href="#kontakt.html">Kontakt</a>

© 2026 SELFHTML

</footer>

</body> </html>

Abgerufen am 7.06.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Grid-named-5.html"