Beispiel:Grid-named-3.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 Linien - 3</title>

<style> body { display: grid; gap: 0.5em; grid-template-columns: 

   [left] 1fr
   [nav-start] 1fr
   [nav-end content-start] 3fr
   [content-end margin-start] 1fr
   [margin-end right];

grid-template-rows: min-content [nav-start main-top] 1fr [aside-start] 1fr [footer-start main-bottom] min-content; }

header { grid-column: left/ right; } nav, #news { 

   grid-column: nav-start / nav-end;

}

  1. content {
 grid-column: content-start / content-end;

grid-row: main-top / main-bottom; }

footer { grid-column: left / right; }

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; grid-column: 1 / 6; grid-row: 1 / auto;

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

nav { background: #fffbf0; border-color: #e7c157; ul {padding-left:1em } }

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

Grid Layout mit benannten Linien - 3

</header>

<nav>

Navigation

  • <a href="#">Startseite</a>
  • <a href="#">Unterseite 1</a>
  • <a href="#">Unterseite 2</a>
  • <a href="#">Kontakt</a>

</nav> <article id="content">

Rasterlinien mit mehreren Namen

Manche der Benannten Linien haben jetzt doppelte Namen:

	grid-template-columns:
    [left] 1fr
    [nav-start] 1fr
    [nav-end content-start] 3fr
    [content-end margin-start] 1fr
    [margin-end right];
	grid-template-rows: 
    min-content 
    [nav-start main-top] 1fr 
    [aside-start] 1fr
    [footer-start main-bottom] min-content;			
};

Der Inhalt wurde so positioniert:

#content {
	grid-column: content-start / content-end;
	grid-row: main-top / main-bottom;
}

So können die Rasterfelder noch genauer angesprochen werden.

</article>

<aside id="news">

Top-News

Gestern gab's Freibier!

</aside>

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

© 2026 SELFHTML

</footer>

</body> </html>

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