Beispiel:Grid-named-1.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Benannte Linien - 1</title>
<style> body { display: grid; gap: 0.5em; grid-template-columns: [left] 1fr [content-start] 3fr [content-end] 1fr [right]; grid-template-rows: min-content 1fr min-content; }
header { grid-column: left/ right; }
- content {
grid-column: content-start / content-end; }
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; }
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">
Linien benennen statt zählen - 1
</header>
<article id="content">
Semantisches Grid
Unser Grid erhält nun Benannte Linien:
grid-template-columns: [left] 1fr [content-start] 3fr [content-end] 1fr [right];
Der Inhalt wurde so positioniert:
#content {
grid-column: content-start / content-end;
}
</article>
<footer> <a href="#kontakt.html">Kontakt</a>
© 2026 SELFHTML
</footer>
</body> </html>
