CSS/Tutorials/Grid/Grid-Container

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Grid
Wechseln zu: Navigation, Suche

In diesem Kapitel lernen Sie, wie Sie Schritt für Schritt mehrspaltige Layouts mit dem neuen Grid Layout gestalten können. Hier ist es möglich, die Elemente beliebig zweidimensional anzuordnen.

Dabei entwickeln wir ein responsives Layout, das sich individuell an jeden Viewport anpassen kann. Die wenigen Browser, die Grid Layout nicht unterstützen, ordnen die Elemente der Webseite untereinander an. Alternativ können Sie die Festlegungen für das Grid Layout innerhalb einer @supports -Regel definieren und ein herkömmliches Design als Fallback anbieten.


Ein Raster[Bearbeiten]

Als Grundlage verwenden wir unsere Webseite aus dem HTML5-Tutorial; weiterführende Informationen über nötige Grundeinstellungen erhalten Sie im Artikel CSS/Tutorials/mehrspaltige Layouts.

display: grid[Bearbeiten]

Die Grid-Container werden durch display: grid bzw. inline-grid definiert und können eine Breite, bzw. Mindest- oder Maximalbreite haben.

Beispiel
body {
  display: grid;
  max-width: 99em;
}

In der Spezifikation gibt es noch den Wert subgrid. Mit ihm soll es in Zukunft möglich werden, auch andere als direkte Kindelemente des Grid-Containers in ein Gestaltungsraster zu integrieren.

Erzeugen von Spalten und Zeilen[Bearbeiten]

Das oben erzeugte Raster hätte nur eine Spalte mit untereinanderliegenden Zellen. Damit diese nebeneinander positioniert werden, erzeugen wir nun Spalten.

Einer der faszinierendsten Aspekte ist die Erzeugung der Rasterstruktur. Hier können Sie bereits im Grid Container, also dem Elternelement, die Größe und Position der einzelnen Rasterelemente (Grid Items) festlegen. Dabei können Sie Anzahl und Größe der Spalten und Reihen explizit angeben oder dies den auto-placement-Algorithmus implizit erledigen lassen.

explizite Erzeugung[Bearbeiten]

Mit grid-template-columns können Sie Anzahl und Breite der Spalten,
mit grid-template-rows Anzahl und Höhe der Zeilen explizit festlegen.

Beispiel: Grundraster ansehen …
body {
  display: grid;
  grid-template-columns: auto auto auto; 
}
Der body wird durch display: grid zu einem Grid Container. Die direkten Kindelemente werden nun innerhalb eines Rasters angeordnet.

Mit grid-template-columns: auto auto auto; werden drei Spalten festgelegt, deren Breite und Höhe sich an den Inhalt anpassen und die über den verfügbaren Platz verteilt werden.

Die sechs Kindelemente nehmen zwei Zeilen oder Reihen ein.

Es gibt im Beispiel keine explizite Festlegung von Zeilen, diese werden implizit erzeugt.

Anonyme Rasterelemente[Bearbeiten]

In ein HTML-Dokument eingefügter Text bildet einen Textknoten, der aber mangels CSS-Selektor nicht formatiert werden kann. Im Grid Layout wird er als anonymes Rasterelement trotzdem in das Gestaltungsraster eingepasst.

Beispiel: Grundraster mit anonymem Rasterelement ansehen …
<header>
 ...
</header>

<nav>
   ...	
</nav>

Klartext, der ein anonymes Rasterelement bildet.

<aside id="news">
  ...
</aside>

<article>
  ...
</article>
Der auto-placement-Algorithmus parst alle Kindelemente von body, also auch den Textknoten, als Rasterelemente und ordnet sie passend an.

Mehr über den auto-placement-Algorithmus finden Sie im Kapitel implizite Erzeugung von Rastern.

implizite Erzeugung[Bearbeiten]

Wie im oberen Beispiel zu sehen ist, müssen Sie nicht alle Spalten und Zeilen von vornherein definieren. Wenn Sie mehr Grid Items als die im Raster definierten Spalten oder Zeilen verwenden, wird implizit für jede über die definierte Zahl hinausgehende Spalte oder Zeile eine weitere Spalte bzw. Zeile erstellt, deren Breite bzw. Höhe auf auto (an Inhalt anpassen) festgelegt wird.

Beispiel: Grundraster ansehen …
body {
  display: grid;
  grid-template-columns: auto auto auto; 
}
Der body wird durch display: grid zu einem Grid Container. Die direkten Kindelemente können nun innerhalb eines Rasters angeordnet werden.

Mit grid-template-columns: auto auto auto; werden drei Spalten festgelegt, deren Breite und Höhe sich an den Inhalt anpassen und die über den verfügbaren Platz verteilt werden.

Die sechs Kindelemente nehmen zwei Zeilen oder Reihen ein.

neue Wege bei Längenangaben[Bearbeiten]

Viele Tutorials über Grid Layout verwenden für die Spaltenbreiten Längenangaben in festen Pixelwerten. Dies ist möglich; verhindert aber einen entscheidenen Vorteil des Grid Layout Moduls: anstelle des Entwicklers legt der Browser des Benutzers die Maße anhand des verfügbaren Platzes fest.

Anstelle des Werts auto, der dem Inhalt den minimal benötigten Platz zuweist, können Sie auch eigene Zuweisungen in Form von Längenangaben oder Bruchteilen angeben. Schon bei Flexbox konnte man auf die Berechnung von Prozent-Werten verzichten und der flex-Eigenschaft eine Zahl als Anteil an der verfügbaren Breite zuordnen, aus deren Gesamtwerten dann die verfügbare Breite vom Browser berechnet wurde. Im Grid Layout gibt es hierfür die neue Einheit fr (fraction: engl. für Bruchteil).

Ändern Sie im obigen Beispiel die Werte für die Spalten auf:

Beispiel: Grundraster mit gleicher Breite
 grid-template-columns: 1fr 1fr 1fr ;
Die drei Spalten erhalten jetzt jeweils 1/3 Breite.

repeat() - kürzer und übersichtlicher[Bearbeiten]

Das „CSS-Framework“ Bootstrap besteht aus einem Raster mit 12 Spalten. Hier könnte man mit der repeat()-Funktion auf eine Angabe der Einzelwerte verzichten:

Beispiel: Grundraster mit 12 gleichbreiten Spalten
 grid-template-columns: repeat(12, 1fr);
Die Kindelemente des Rasters verteilen sich auf 12 Spalten. Für unser Beispiel ist das aber noch nicht praktikabel, da die sechs direkten Kindelemente des Rasters jetzt alle nebeneinander und sehr schmal dargestellt werden.
Empfehlung: Verzichten Sie auf Raster mit so vielen Spalten!
Wie Sie z.B. im folgenden Beispiel eines fixen Footers sehen können, ist es einfacher den Spalten unterschiedliche Breiten zu geben und so das Raster einfacher und übersichtlicher zu halten.

feststehender Footer[Bearbeiten]

Beispiel: Grundraster ansehen …
body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;	
  grid-template-rows: 150px 1fr 1fr 100px;
  min-height: 100vh;
}
...
footer {
  grid-column: 1 / span 3;
  grid-row:    4;					
}
Der body wird durch display: grid zu einem Grid Container. Die direkten Kindelemente können nun innerhalb eines Rasters angeordnet werden.

Mit grid-template-columns: 1fr 3fr 1fr; werden nun drei Spalten festgelegt, die den verfügbare Breite im Verhältnis der Bruchteile (hier 1 : 3 : 1) untereinander aufteilen.

Mit grid-template-rows: 150px 1fr 1fr 100px; werden nun vier Zeilen festgelegt. Während die obere und untere Zeile feste Höhen haben, teilen die beiden mittleren Zeilen den verfügbaren Raum unter sich im Verhältnis der Bruchteile fr (hier 1:1) unter sich auf.

Die sechs Kindelemente (Grid Items) werden mit grid-column und grid-row passend positioniert; der footer nimmt zum Beispiel den Raum zwischen 4. und 5. horizontaler Rasterlinie (also die 4. Zeile) ein. In grid-column ist festgelegt, dass er an der ersten vertikalen Rasterlinie beginnt und (alle) 3 Spalten überspannt.

Fazit[Bearbeiten]

Für CSS ungewöhnlich können Sie im Grid Layout anders als beim Positionieren mit float und clear oder selbst mit Flexbox nur durch CSS-Festlegungen des Elternelement eine Webseite gestalten. Natürlich ist es aber auch möglich, die Kindelemente im Raster, die Grid-Items, zu formatieren, wie Sie im nächsten Kapitel sehen werden.

Empfehlung:
  • Verwenden Sie, wie in diesem Kapitel, die relativen Maße em und vh, sowie den Bruch-/Anteil fr. So wird die Rechnerei, wie viel Platz denn nun verfügbar ist, dem Browser überlassen.
  • Verzichten Sie auf feste Pixelwerte. Auch wenn viele Tutorials diese verwenden, ist dies in der Praxis nicht zu empfehlen, da so die Vorteile der flexiblen Positionierung und Ausrichtung nicht vollständig zur Wirkung kommen.