CSS/Tutorials/Grid/Einführung
Text-Info
- 30min
- einfach
- Grundkenntnisse in
• HTML
• CSS
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
Es wird häufig gewünscht und implementiert, 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;
}
@media (min-width: 45em) {
/* Breite beträgt mindestens 45em */
body {
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr 100px;
}
}
header,footer {
grid-column: 1 / -1;
}
Das Grid Layout erstellt für den body ein Raster mit 3 Spalten und 3 Reihen. Diese erhalten zum Teil feste, zum Teil flexible Höhen und Breiten. So bestehen die Werte für grid-template-columns nur aus Bruchteilen (fr - 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 100px Höhe - die mittlere Reihe nimmt mit der Festlegung 1fr wieder 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: Exkurs: Benannte Bereiche
grid-column: 1 / -1;), können Sie benannte Bereiche festlegen:
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 in ASCII-Schemata 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%;
}
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.[6] Es scheint simpel und kann auf vielen Wegen realisiert werden.
Eine Umsetzung mit float, sowie eine Alternative mit display:tablecell finden Sie hier:
Jay Freestone stellt eine Umsetzung mit Grid Layout vor.[7]
<ul class="media">
<li>
<img src="Frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
<h3>Frühling</h3>
<p>Endlich wird es wieder ein bisschen sonniger und wärmer.
Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
</p>
<footer>
optionaler Footer
</footer>
</li>
</ul>
.media li {
display: grid;
grid-template-columns: 7em 1fr;
grid-template-rows: 2em 3em;
gap: 1em;
margin-bottom: 1em;
}
.media li>img {
grid-row: 1 / 3;
width: 6em;
}
Das Listenelement wird zum Grid-Container mit 2 Spalten und Reihen. Nur das Bild wird fest über zwei Zeilen verankert, durch seine Position im HTML kommt es in die erste Spalte. Alle anderen Elemente fügen sich automatisch in die Rasterzellen ein: Die Überschrift rechts oben, der Text rechts darunter. Der optionale footer würde in einer dritten, automatisch erzeugten Reihe am linken Rand stehen.
Bilder-Galerie
Bildergalerien enthalten eine Anzahl Bilder, die oft im gleichen Format nebeneinander dargestellt werden. Manchmal möchte man ein Bild herausheben und größer darstellen.
Dieses Beispiel enthält eine Großansicht und mehrere thumbnails. Dabei wollen wir demonstrieren, dass man für Grid Layout kein explizites Raster festlegen muss. Weitere Elemente werden einfach automatisch oder implizit erzeugt.
.grid {
--n: 3;
display: grid;
max-width: 20em;
gap: .5em;
border: medium dashed #337599;
margin-bottom: 1em;
}
.horizontal {
grid-auto-flow: column;
}
.grid img:first-child {
grid-area: span var(--n) / span var(--n);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
Das Raster wird nur durch display: grid erzeugt. Die Anzahl der Spalten und Reihen richtet sich ganz nach der Anzahl der Bilder - der Grid-Items.
Das erste Bild wird mit dem first-child-Selektor ausgewählt. Über die grid-area-Eigenschaft erhält es eine Zuordnung über 3x3 Rasterzellen:
.grid img:first-child {
grid-area: span 3 / span 3;
}
Im Live-Beispiel wurde die Magic Number durch eine Custom property ersetzt, die innerhalb eines style-Attributs im div angegeben wird.
Alle weiteren Bilder ordnen sich implizit in das Raster ein.
Eine abgewandelte Version, in der die Bilder bei :hover in einer Großansicht gezeigt werden, findet sich hier:
Fazit:
Grid Layout ist ein mächtiges und gar nicht kompliziertes Werkzeug, das pixelgenaue Layouts abgelöst hat und in allen Browsern funktioniert.
Mittlerweile verwende ich fast nur noch Grid Layout, da es intuitiver ist. --Matthias Scharwies (Diskussion) 08:09, 2. Aug. 2022 (CEST)
Flexbox oder Grid Layout?
Jeffrey Zeldman empfiehlt den Einsatz von Grid Layout, wenn ein Layoutraster erstellt werden soll, von Flexbox, wenn bestehende Inhalte ein Layout erhalten sollen.[8]
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.
„Flexbox dient im Wesentlichen dem Layout von Objekten in einer Reihe oder einer Spalte. Grid ist für ein Layout in zwei Dimensionen - Reihen und Spalten.“
Rachel Andrew[9]
Aufbau eines Gestaltungsrasters
Ein Raster besteht grundsätzlich aus senkrechten Spalten (engl. columns) und waagerechten Zeilen (engl. rows). Genau genommen befinden sich dort aber nur Rasterlinien (engl. grid lines). Zwischen zwei Rasterlinien befinden sich die eigentlichen Spalten und Zeilen (grid tracks).
Ein Bereich innerhalb von zwei horizontalen und zwei vertikalen, jeweils benachbarten Rasterlinien heißt Zelle (grid cell). Sie können aber auch durch Positionsangaben mehrere Zellen überspannen und Rasterbereiche (grid-area) mit mehreren Zellen bilden.
Änderung der Anordnung
Sie können im Grid Layout die Reihenfolge der Elemente unabhängig von HTML-Markup bestimmen. Dies erreichen sie entweder über eine feste Positionierung mit grid-row und grid-column oder über die schon aus Flexbox bekannte Eigenschaft order.
- sitepoint: How to Order and Align Items in Grid Layout Nitish Kumar, 14.03.2017
Quellen
- ↑ Wikipedia: Gestaltungsraster vom 16.07.2017
- ↑ css-tricks: CSS Grid Starter Layouts Geoff Graham on Dec 13, 2019
- ↑ Wikipedia: Holy grail (web design)
- ↑ kulturbanause: Was ist ein »Holy Grail« Web-Layout?
- ↑ SELF-Forum: Dreispaltiges Layout vom 01.02.2021
- ↑ stubbornella: The media object saves hundreds of lines of code June 25, 2010 Nicole Sullivan
- ↑ Jay Freestone: Bulletproof flag components A resilient take on a flag-like media object.
- ↑ Jeffrey Zeldman auf Twitter
- ↑ Rachel Andrew: Should I use Grid or Flexbox?
