oxo888oxo: Ganz einfaches CSS Grid Layout

Beitrag lesen

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.

Mir ist natürlich auch sehr wichtig, dass es responsive ist und auch auf Smartphones gut ausschaut.

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

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