Beispiel:CSS-grid-layout-5.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" main="width=device-width, initial-scale=1.0"> <style> body{ margin: 10px auto; max-width: 60em; font-family: sans-serif; color: #333333; 

 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-areas: "head head "
                      "nav  nav"
                      "main main"
                      "news aside"

"foot foot"; }

@media (min-width: 30em) { 

 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: 50em) { 

 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"; 

}

}

header, nav, main, article, section, aside, footer { border-radius: 0px 0.5em 0.5em; border: 1px solid; padding: 10px; margin: 10px; }

header { background: #F1F3F4; border-color: #d5d5d5; 

 grid-area: head;

}

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

 grid-area: nav;

}

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

 grid-area: main;

}

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

 grid-area: aside;

}

#news { 

 grid-area: news;

}

footer { background: #e4ebf2; border-color: #8a9da8; 

 grid-area: foot;

} header { background: #F1F3F4; border-color: #d5d5d5; display: grid; grid-template-columns: 4em 1fr; gap: .5em;

img { width: 2.25em; aspect-ratio: 1/1; padding-top: 1.5em; } } </style> <title>Grid Layout - 5</title> </head>

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

HTML5 mit CSS Grid - 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">

Top-News

Gestern gab's Freibier!

</aside>

<article>

CSS-basierte Grid Layouts

Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit, responsive und flexible Layouts zu erstellen. Dabei benötigt es keine feste Größenangaben oder weitere CSS-Einstellungen wie position, float oder clear.

Elemente können beliebig innerhalb eines Rasters platziert werden, wenn gewünscht, auch übereinander.

Grid Layout wird in allen modernen Browsern unterstützt.

</article>

<aside>

Weiterführende Links

</aside>


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

© 2017 SELFHTML

</footer>

</body> </html>

Abgerufen am 28.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-grid-layout-5.html"