Ganz einfaches CSS Grid Layout
bearbeitet von
Hallo
Ich möchte meine Website nochmal von Grund auf neu aufbauen. Das Layout möchte ich gerne per CSS Grid machen.
Das Layout möchte ich extrem einfach halten. Nur eine Spalte mit 4 Zeilen:
* Kopf
* Navigation
* Inhalt
* Fuß
Ich habe jetzt mal den folgenden Code erstellt. Und damit ich gleich von Anfang an Fehler vermeine, möchte ich Euch fragen, ob ich das erstmal richtig gemacht habe mit dem Grundaufbau.
Die Rahmen habe ich erstmal nur eingebaut, um mir die "Boxen" besser vorstellen zu können.
Angucken kann man es hier: [https://spaceart.de/_xxx.php](https://spaceart.de/_xxx.php)
Gruß
Ingo
~~~
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS-Grid-Layout</title>
<style>
body {
max-width: 62rem;
margin: 0rem auto 0rem auto;
border: 1px solid grey;
min-height: 100vh;
}
body>* {
border: 1px solid grey;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<header >
<p>KOPF</p>
</header>
<nav>
<p>NAVIGATION</p>
</nav>
<main>
<p>INHALT</p>
<img src="/_xxx-3.jpg">
</main>
<footer>
<p>FUSS</p>
</footer>
</body>
</html>Quelltext hier
~~~