Beispiel:CSS-grid-layout-fix-footer.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: 0 auto; 

   max-width: 60em;
   font-family: sans-serif;
   color: #333333;
   display: grid;
   grid-template-columns: 1fr 3fr 1fr;	
   grid-template-rows: min-content 1fr 1fr min-content;
   gap: .5em;
   min-height: 100vh;

}

header, nav, article, aside, footer { 

  border-radius: 0 0.5em 0.5em;
  border: medium solid;
  padding: .5em;

}

header { background: #F1F3F4; border-color: #d5d5d5; grid-column: 1 / span 3; grid-row: 1; display:grid; grid-template-columns: min-content 1fr; }

nav { background: #fffbf0; border-color: #e7c157; grid-column: 1; grid-row: 2 / 4; }

article { background: #ffede0; border-color: #df6c20; grid-column: 2; grid-row: 2 / 4; }

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

footer { background: #e4ebf2; border-color: #8a9da8; grid-column: 1 / span 3; grid-row: 4; } h2 { 

 border:thin dotted;

} </style> <title>Grid Layout - feststehender Footer</title> </head>

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

Grid Layout mit feststehendem Footer

</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 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-fix-footer.html"