Beispiel:CSS-grid-resp-3.html
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body{ margin: 10px auto; max-width: 75em; font-family: sans-serif; color: #333333; display: grid; grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
grid-auto-flow: dense;
border: 1px solid; } article { grid-column: 1 / -1; grid-row: span 2; }
header { grid-column: 1 / -1; }
- news {
grid-column: span 2; }
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; display: grid; grid-template-columns: 4em 1fr; gap: .5em;
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; }
footer { background: #e4ebf2; border-color: #8a9da8; } </style> <title>responsives Raster</title> </head>
<body> <header> <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="logo">
Inhaltsverzeichnis
1 responsives Raster ohne media queries
</header>
<nav>
- <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">
3 Top-News
Mit der minmax()-Funktion kannst du einen Mindest- und einen Maximalwert für die Breite der Zellen bestimmen!
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
</aside>
<article>
CSS-basierte Grid Layouts
<p>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
- <a href="https://wiki.selfhtml.org/">Wiki</a>
- <a href="https://forum.selfhtml.org/">Forum</a>
- <a href="https://blog.selfhtml.org/">Blog</a>
</aside>
<aside>
6 noch ein Kasten
mit etwas Text
</aside>
<footer>
<a href="#kontakt.html">Kontakt</a>
© 2017 SELFHTML
</footer>
</body> </html>
