Das ideale Weblayout mit Grid-Layout

Für perfekte Websites mit schlankem Quellcode

Den Begriff "responsive" muss man heute nicht mehr oft erklären. Die meisten Websites sind responsive geworden. Sie passen sich an Gerät und Auflösung an. Dazu gibt es viele Techniken Los ging es mit dem Sticky-Footer, einer Technik, die vielen den Schweiß auf die Stirn trieb, weil irgend eine min-Deklaration fehlte. Irgendwann - und zwar ziemlich zu Beginn von responsive - kam das Flexbox-Modell, das war schon recht gut, nur fehlte die breite Browserunterstützung, also kam es in die Schublade.

Still und heimlich fand Flexbox dann doch Einzug und zeitnah kam das Grid-Layout. Im Grunde kann man jede Methode für sich eigenständig verwenden, der Reiz liegt in der Kombination.

 

Die HTML-Seite

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Seitentitel</title>
<meta name="Description" content="Beschreibung für Suchmaschinenergebnis">
</head>
<body>
<div id="topnavi"></div>
<header></header>
<nav></nav>
<section id="main"></section>
<footer></footer>
</body>
</html>

CSS mit Grid-Layout


html { 
	height: 100%; 
}

body {
  	display: grid;
	min-height: 100%;
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas: 
	"topnavi"
        "header"
        "navi" 
	"main"
	"footer";
}

#topnavi {
        grid-area: topnavi;
}

header {
	grid-area: header;
}

nav {
        grid-area: navi;
}

#main {
        grid-area: main;
}

footer {
        grid-area: footer;
}


Wichtig ist sowohl html als auch body mit height:100% bzw. min-height:100% zu definieren.

In der Deklaration für den body wird mit grid-template-rows die vertikale Aufteilung des Grids definiert.

auto = Auf die Größe des Inhalts reduduziert
1fr =  Der gesamte restliche Platz

Mit grid-template-areas werden die Grid-Bereiche festgelegt
und mit grid-area: zugewiesen.

Dabei ist es unerheblich, ob die Zuweisung an tags, ID oder Klassen erfolgt.

Die Grid-Elemente liegen alle auf der gleichen Ebene. Befindet sich auf auf dieser Ebene ein weiteres Blockelement, für das kein Grid-Bereich definiert wurde, so wird es in der Seite erst nach dem Grid angezeigt.

Natürlich bietet das Grid-Layout weitaus mehr Möglichkeiten. Der Schlüssel zum Erfolg liegt aber oft darin, ein Thema so übersichtlich wie möglich zu erklären. Hat man das verstanden, steht einem tieferen Einstieg nichts im Wege. Das Prinzip Einfachheit als Erfolgsmodel.