CSS/Tutorials/Grid/Einführung
Ein grid (englisch für Gitter, Gestaltungsraster)) ist ein Ordnungssystem in der visuellen Kommunikation, das als Hilfskonstruktion die Organisation von grafischen Elementen auf einer Fläche oder in einem Raum erleichtert. Bereits im Mittelalter wurden bei Handschriften vor dem Schreiben einfache Raster auf eine Seite gezeichnet, um eine einheitliche Einteilung der Seiten eines Buches zu erhalten. Auch die Codices (ca. 700–900 n. Chr.) der Maya zeigen eine regelmäßige Einteilung durch erkennbare Hilfslinien, die das Lesen vereinfachen sollen.[1]
Im Webdesign waren das Tabellen-Layout der 90er und die Entwicklung von „CSS-Frameworks“ wie bootstrap Versuche, Webseiten übersichtlich mit Rastern zu gestalten. Allerdings benötigten diese Ansätze eine Vielzahl von zusätzlichen HTML-Elementen, die das Markup an sich unübersichtlich werden ließen und das Prinzip der Trennung von Inhalt, Präsentation und Verhalten missachteten.
Mit dem CSS Grid Layout Modul ist nun endlich eine Lösung gefunden worden. Teilweise ist es sogar möglich, alle CSS-Festlegungen im Grid-Container vorzunehmen, was responsive Flexibilität und spätere Änderungen sehr erleichtert.
Dieses Kapitel stellt mehrspaltige Allround-Layouts vor, die Seitenelemente nach dem Grundsatz „Mobile first!“ auf kleinen Viewports untereinander, bei breiteren Bildschirmen in mehreren Spalten nebeneinander angeordnet werden.[2]
Als Grundlage verwenden wir unsere Webseite aus dem HTML5-Tutorial.
Inhaltsverzeichnis
Holy-Grail-Layout
Information: Holy-Grail-Layout
Das Holy-Grail-Layout ist ein Webseiten-layout mit mehreren Spalten, die – egal wie viel Inhalt sie haben – die gleiche Höhe behalten.Es wird häufig gewünscht, konnte aber viele Jahre lang mit damals verfügbarem CSS nur mit vielen Hacks, die alle Nachteile hatten, realisiert werden.
Aus diesem Grund wurde das Finden einer optimalen Implementierung mit der Suche nach dem schwer fassbaren Heiligen Gral verglichen.[3][4]
Häufig sieht man ein Layout mit einer linksseitigen Navigation, einem mittleren Inhaltsbereich mit flexibler Breite und rechts einer Spalte für zusätzliche Informationen.
In der Zeit des Layouts mit CSS-floats konnte diese Struktur nur mit festen Höhen erreicht werden, die dann bei einem zusätzlichen Textabsatz „zerbrachen“. Mit Flexbox können solche Konstrukte hergestellt werden, benötigen oft aber noch einen zusätzlichen Wrapper.
Einfacher ist die Umsetzung mit Grid Layout:
body {
display: grid;
gap: 0.5em;
}
/* 3-spaltiges Layout für breitere Viewports */
@media (min-width: 45em) {
body {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr min-content;
}
}
header,footer {
grid-column: 1 / -1;
}
Der body erhält mit display: grid ein Raster und mit gap Abstände zwischen den Rasterfeldern. Diese sind (noch) nicht festgelegt - schließlich macht ein 3-Spaltenlayout auf einem alten Nokia keinen Sinn!
Erst ab einer Viewportbreite von 45em wird ein mehrspaltiges Raster mit zum Teil festen, zum Teil flexiblen Maßen erzeugt:
-
grid-template-columns: 1fr 3fr 1fr;verwendet nur Bruchteile fr (fraction) - der verfügbare Platz verteilt sich automatisch. - Die Höhe richtet sich in der ersten Reihe nach dem Inhalt (
auto), in der letzten beträgt sie min-content - die mittlere Reihe nimmt mit der Festlegung1frwieder den verfügbaren Rest ein.
Nur header und footer werden mit grid-column von der ersten (1) bis zur letzen Randlinie (-1) positioniert. Im 3-Spalten-Layout bei breiten Viewports erstrecken sie sich über die gesamte Breite.
Information: Benannte Bereiche
grid-column: 1 / -1;), können benannte Bereiche festgelegt werden:
Diese Methode benötigt aber einen CSS-Regelsatz für jedes verwendete Element und jeweils angepasste Grid-areas an alle verwendeten media-queries.
Allerdings ist so das Layout der Seite übersichtlich als ASCII-ähnliche Grid Area Map vorhanden.
body {
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
footer bedeutet, dass sich der footer über 3 Rasterfelder erstreckt.Wie sich die Inhalte des footer-Elements anordnen, wird nicht im Raster des body-Elements festgelegt.[5]
Zweispaltiges Layout
Dieses Zweispalten-Layout besteht aus header, footer und main-Bereich. Daneben gibt es eine Infobox, die wir mit dem aside-Element auszeichnen.
body {
display: grid;
gap: 0.5em;
}
@media (min-width: 30em) {
/* Breite beträgt mindestens 30em */
body {
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr 100px;
}
}
header,footer {
grid-column: 1 / -1;
}
body {
display: grid;
gap: 0.5em;
}
@media (min-width: 30em) {
/* Breite beträgt mindestens 30em */
body {
grid-template-columns: 1fr 1fr;
}
}
header {
grid-column: 1 / -1;
}
main {
grid-row: span 2;
}
body {
display: grid;
gap: 0.5em;
}
@media (min-width: 30em) {
/* Breite beträgt mindestens 30em */
body {
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 5em 1fr auto;
}
}
header,footer {
grid-column: 1 / -1;
}
aside {
grid-row: 2 / 4;
}
nav li {
display: inline-block;
width: 22%;
background: #dfac20;
}
nav li a {
display: inline-block;
padding: 0.5em;
text-align:center;
width: 100%;
}
Überschrift links
Das Layout soll die Überschrift als linke Box, den Textabsatz als rechte positionieren. Dabei soll sich die Breite des Absatzes am verfügbaren Platz, der neben der Überschrift bleibt, orientieren.[6]
Mit Grid Layout ist dies kein Problem:
<section>
<h2>Überschrift</h2>
<p>Dieser Textabsatz könnte breiter sein, als der verfügbare Platz. Deshalb wird er umbrechen.
Aber wo bleibt die Überschrift?
</p>
</section>
@media (min-width: 20em) {
section {
display: grid;
grid-template-columns: min-content 1fr;
}
}
Mit grid-template-columns werden zwei Spalten angelegt: Die erste erhält mit min-content genau den Platz, den die Überschrift benötigt; die zweite erstreckt sich mit 1fr auf den übrigen verfügbaren Raum.
Pull quote links
Links neben den Text soll eine „Seitenansprache“ (engl. "pull quote"), bestehend aus Überschrift und einem Textabsatz positioniert werden. Die Anzahl der Textabsätze rechts soll flexibel sein.
<header>
<h2>Der Greenscreen</h2>
<p>Faszinieren Sie Ihre Gäste mit Fotomontagen der besonderen Art</p>
</header>
Als semantisch passendes Container-Element wird ein header verwendet. Die Auszeichnung als h2 und p hat nichts damit zu tun, was davon in größerer Schrift dargestellt wird.
Nun wird der Bereich von .info (bei genügend breitem Viewport und Browserunterstützung von grid) in 2 Spalten info-header und info-body geteilt:
@media (min-width: 40em) {
.info {
display: grid;
grid-template-columns:
[info-header-start] 1fr
[info-header-end info-body-start] 1fr
[info-body-end];
grid-template-rows: 1fr 1fr;
}
}
.info header {
grid-column: info-header;
grid-row: 1 / -1;
}
.info > * {
grid-column: info-body;
}
Der header kommt in die Spalte info-header; der Rest in info-body:
grid-template-rows/grid-row ist nötig, damit der header die ganze Höhe füllen kann und nicht die Höhe der ersten Zelle in der Nachbarspalte bestimmt.
Das Media-Objekt
Das Media-Objekt ist ein Entwurfsmuster mit einer Grafik links und heading sowie Text rechts daneben. Der Begriff wurde 2010 von Nicole Sullivan geprägt und z. B. auch von der MDN verwendet - andere würden es lieber „Bild mit Text“ nennen.[7] Es scheint simpel und kann auf vielen Wegen realisiert werden.
Eine Umsetzung mit float, sowie eine Alternative mit display:tablecell findet sich hier:
Jay Freestone stellt eine Umsetzung mit Grid Layout vor.[8]
<ul class="media">
<li>
<img src="Frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia"