Beispiel:CSS-grid-layout-2.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"> <style> body { margin: 1em auto; max-width: 60em; font-family: sans-serif; color: #333333; display: grid; 

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

}

header { background: #F1F3F4; border-color: #d5d5d5; grid-column: 1 / 6; 

 			grid-row:    1 / auto;

}

nav { background: #fffbf0; border-color: #e7c157; grid-column: 1 / span 5; 

 			grid-row:    2 ;

}

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

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

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

header, nav, article, aside, footer { border-radius: 0 0.5em 0.5em; border: thin solid; padding: .5em; margin: .5em; }

</style> <title>Grid Layout - 2</title> </head>

<body> <header> <img src="/images/a/ad/Selfhtml-beispiel_150.svg" alt="logo">

HTML5-Seite mit Grid Layout - 2

</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, ohne feste Größenangaben und weitere CSS-Einstellungen wie position, float oder clear nutzen zu müssen.

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

Grid Layout wird in allen modernen Browsern (und mit vendor-prefix -ms- auch in IE10+11) unterstützt.

</article>

<aside>

Weiterführende Links

</aside>


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

© 2017 SELFHTML

</footer>

</body> </html>

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