Die Möglichkeit mit Grid Layouts bietet eine Möglichkeit eine Seite in größere Bereiche zu unterteilen oder die Beziehung in Bezug auf Größe, Position und Ebene zwischen Teilen eines Steuerelements zu definieren.
Wie bei Tabellen ermöglicht das Rasterlayout einem Autor, Elemente in Spalten und Zeilen auszurichten. Mit CSS Grids sind ein vielfaches mehr an Layoutmöglichkeiten realisierbar oder deutlich einfacher als durch den Einsatz von Tabellen machbar ist.
Hier eine kleine Demo dazu.
Der dargestellte Bereich ist veränderlich je nach Breite des Browserfensters.
Im nachfolgenden findet ihr den Code für die Darstellung „Grid Layout“.
Die Grid-Eigenschaft ist eine abgekürzte Schreibweise, die alle expliziten und impliziten Grid-Eigenschaften in einer einzigen Deklaration festlegt.
Erklärung
Zuerst der Header mit den CSS Statements.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Spaltenlayout</title>
<style>
body {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr 2fr 1fr;
}
nav {
grid-column: 1;
grid-row: 2;
padding: 1rem;
background-color: #FAC273;
}
article {
grid-column: 2;
grid-row: 2;
padding: 1rem;
background-color: #5B67FA;
color: #F1F1F1;
}
footer {
grid-column: 1 / 4;
grid-row: 3;
padding: 1rem;
background-color: #4DB7FA;
}
header {
grid-column: 1 / 4;
grid-row: 1;
padding: 1rem;
background-color: #AA66FA;
}
aside {
grid-column: 3;
grid-row: 2;
width: 40%;
padding-left: 0.5rem;
margin-left: 0.5rem;
float: right;
background-color: #DDDDDD;
box-shadow: inset 5px 0 5px -5px #111111;
font-style: italic;
color: #30606E;
}
aside > p {
margin: 0.5rem;
}
p {
font-family: sans-serif;
}
</style>
</head>Der HTML Code nimmt sich dagegen recht einfach aus.
<body>
<header>
<p>Hier erscheint der Kopfbereich</p>
</header>
<nav>
<p>...Menüs evtl.</p>
</nav>
<aside>
<p>Das ist ein Bereich der neben dem Inhalt angezeigt wird</p>
</aside>
<article>
<p>Hier erscheint der Inhalt.</p>
<p>Hier erscheint mehr Inhalt.</p>
<p>Hier erscheint noch mehr Inhalt.</p>
</article>
<footer>
<p>Fussbereich</p>
</footer>
</body>
</html>Zusammenfassend ist zu sagen, mit dem Grid System können alle denkbaren Kombinationen erstellt werden. Aber, sie müssen rechteckig sein. L-Formen lassen sich nicht konstruieren.
Der Code dient zur Darstellung des Verhaltens.