CSS/Eigenschaften/grid/implizite Erzeugung von Rastern

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | grid
Wechseln zu: Navigation, Suche

Im Printdesign und auch bei „CSS-Frameworks“ wie bootstrap wird zuerst ein Gestaltungsraster erstellt, in dem dann Rasterelemente fest platziert werden. Im Webdesign mit seiner Unzahl von verschiedenen Viewportgrößen ist dies zwar auch möglich, oft aber gar nicht nötig.

Mit dem Grid Layout ist es möglich Raster implizit zu erzeugen, die durch den auto-placement-Algorithmus Rasterelemente automatisch auf den verfügbaren Platz verteilen.

In diesem Tutorial soll gezeigt werden, wie Sie mit wenigen CSS-Festlegungen Raster implizit erzeugen, deren Rasterelemente sich ohne den Einsatz von media queries responsiv anordnen.

Grundlagen[Bearbeiten]

Blockelemente wie Überschriften und Absätze nehmen im Standardverhalten der Browser stets die verfügbare Breite ein. Mit der Einführung von CSS wurde es möglich, Positionierungen und Größenangaben auch außerhalb des Elementflusses festzulegen. Dies ermöglichte einerseits ein pixelgenaues Layout, wurde andererseits bei einer Änderung des Viewports zum Boomerang, da sich Inhalte außerhalb des sichtbaren Bereichs oder unter anderen Elementen befanden oder durch overflow: hidden; abgeschnitten wurden. Media queries bieten eine Lösung, die immer wiederkehrende Frage nach den richtigen Breakpoints zeigt, dass aber auch dies nicht die einfachste Lösung ist.

Grid Layout beginnt wieder von vorne: Der verfügbare Raum wird aufgeteilt, weitere Inhalte werden innerhalb des Rasters in weiteren Reihen dargestellt.

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 nun 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. Die Anzahl und Höhe der Reihen ist nicht festgelegt und wird implizit erzeugt.

Fazit: Mit Grid Layout bildet das Elternelement mit wenigen CSS-Eigenschaften ein Raster, die Kindelemente benötigen keine CSS-Festlegungen.

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.

explizit gesetzte Rasterbereiche[Bearbeiten]

Der auto-placement-Algorithmus kann in der Grundeinstellung nur mit Rasterelementen umgehen, die nur eine Zelle umfassen. Dies ist z. B. bei Bildergalerien ausreichend; auf „normalen“ Seiten mit unterschiedlich großen Elementen eher unüblich. Sie können aber mit grid-row, grid-column und der zusammenfassenden Eigenschaft grid-area Rasterbereiche festlegen, die mehrere Zellen überspannen.

Beispiel: Rasterbereiche / Zellen überspannen ansehen …
body{
  display: grid;
  grid-template-columns: auto auto auto;			
}

article {
  grid-area: 2 / 1 / 4 / 3;
}

#news {
  grid-column: span 2;
}
Das article-Element wird fest in 1. und 2. Spalte und 2. und 3. Reihe positioniert.
Das aside-Element überspannt zwei Spalten; eine Festlegung des Startpunkts, bzw. der Reihen wurde nicht getroffen.
Die Elemente werden wie gewünscht positioniert, es bleiben jetzt aber Zellen frei.

Fazit: Sie können einzelne Elemente über mehrere Spalten, bzw. Reihen erstrecken lassen, und /oder feste Positionen festlegen.

grid-auto-flow[Bearbeiten]

Der autoplacement-Algorithmus kann durch die grid-auto-flow-Eigenschaft gesteuert werden.

Folgende Angaben sind möglich:

  • row: (Standardwert) Die Spalten werden mit grid-template-columns explizit erzeugt; je nach Menge der Inhalte werden Zellen implizit erzeugt und in weiteren Reihen angefügt.
  • columns: Weitere Inhalte werden in implizit erzeugten Spalten angehängt.
  • dense: optionales Schlüsselwort, dass kleinere Zellen in vorher entstandene Lücken platziert, sodass es zu einem gefüllten Raster kommt.
    Ohne dieses Schlüsselwort kommt der sparse-Modus zum Zug, der Elemente, wenn kein Platz vorhanden ist, in die nächste Reihe schiebt.
  • row dense:
  • column dense:
Beispiel: ein gefülltes Raster ansehen …
body{
  display: grid;
  grid-template-columns: auto auto auto;
  grid-auto-flow: dense;			
}

article {
  grid-area: 2 / 1 / 4 / 3;
}

#news {
  grid-column: span 2;
}
Durch das Schlüsselwort dense wird der Algorithmus so geändert, dass die vorher leeren Bereiche durch im Markup hinten stehende Elemente aufgefüllt werden.
Beachten Sie, dass Sie das Schlüsselwort dense nur verwenden sollten, wenn es innerhalb des Grids keine fokussierbaren Elemente gibt, da eine Umordnung immer zu unlogischer Tab-Reihenfolge führt.

Responsivität ohne Media queries[Bearbeiten]

Das Beispiel passt sich wie im Liquid Layout an die Viewportbreite an, behält aber seine drei Spalten auch bei sehr schmalen Viewports. Hier könnte mit Media queries umgeschaltet werden; einfacher wäre es aber den Spalten Mindest-und Maximalgrößen zu geben, sodass diese selbst umschalten.

Beispiel: ein gefülltes Raster ansehen …
body{
  display: grid;
  grid-template-columns: repeat (auto-fill, minmax(20em, 1fr));
  grid-auto-flow: dense;			
}

article {
  grid-area: 2 / 1 / 4 / 3;
}

#news {
  grid-column: span 2;
}
Erinnern Sie sich noch an unser erstes Beispiel?
Mit grid-template-columns: auto auto auto; wurden drei Spalten, deren Breite vom Inhalt abhängig war, erstellt.
In diesem Beispiel wurde die repeat()-Funktion verwendet, die nun über den ersten Parameter auto-fill so viele Spalten wie möglich erzeugt.
Der zweite Parameter besteht aus der minmax()-Funktion, die als Minimum einen Wert von 20em und, damit es z. B. bei 50em keine leeren Räume gibt, einen Maximalwert von 1 fr hat. Dann würden die 50em Breite in 2 Spalten a 25em Breite aufgeteilt.

Fazit: Mit wenigen Zeilen CSS erreichen Sie ein stabiles responsives und flexibles Layout, das leicht erweiterbar ist.

Natürlich sollten im praktischen Einsatz header und footer im Desktopmodus alle Spalten überspannen, aber dies sollte für Sie nun kein Problem mehr darstellen!

Anwendungsbeispiele[Bearbeiten]

Formular[Bearbeiten]

Formulare müssen klar und übersichtlich sein. Häufig wurde die Gestaltung durch zahlreiche wrapper-Elemente und Zeilenumbrüche erreicht. Mit dem Grid Layout können Sie nun alle Formular-Elemente an einem Raster ausrichten:

Beispiel: Formular ansehen …
form {
  display: grid;
  grid-template-columns: [labels] auto [controls] auto [oversized] auto;
  grid-auto-flow: row dense;
}
form > label {
  grid-column: labels;
  grid-row: auto;
}
form > input, form > select {
  grid-column: controls;
  grid-row: auto;
}
#department-block {
  grid-row: span 3;
  grid-column: oversized;
}

#buttons {
  grid-row: auto;
  grid-column: 1 / -1;
  text-align: end;
}
Das Formular form wird zu einem Raster mit drei Spalten, deren Größe inhaltsbasiert ist. Die entsprechende Rasterlinien erhalten aussagekräftige Namen.

Alle label-Elemente werden in die label-Spalte platziert; mit grid-row: auto; werden sie automatisch auf die Zeilen verteilt.
Analog wird mit den Eingabeelementen verfahren, die in der controls-Spalte platziert werden.
Das select-Menü mit der id department-block wird in die oversized-Spalte positioniert und umspannt dort 3 Zeilen (Auf mobilen Geräten wird das select-Menü durch ein Popup mit radio-Buttons ersetzt.)

Die Buttons werden von einem div umschlossen, das sich wegen grid-column: 1 / -1; über die gesamte Breite des Rasters erstreckt.

Definitionsliste[Bearbeiten]

Die Elemente von Definitions- oder Beschreibungslisten werden in der browsereigenen Darstellung untereinander angezeigt. Das Platzieren der Blöcke kann schwierig werden, da bei mehreren dd-Elementen ein gemeinsames Elternelement fehlt. Mit Grid Layout ist es möglich, Definitionslisten in ein kompaktes Raster zu fassen.

Beispiel: Formular ansehen …
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  max-width: 300px;
  margin: 1em;
  line-height: 1.4;
}
dt {
  grid-column: 1;
  font-weight: bold;
}
dd {
   grid-column: 2;
 }
Die Beschreibungsliste dl besteht aus zwei Spalten, deren erste sich am vorhandenen Inhalt ausrichtet. Die zweite nimmt den verfügbaren restlichen Raum ein. Der dt-Ausdruck beginnt an der ersten Rasterlinie, also in der 1. Spalte, die Beschreibungen dd immer in der zweiten.

Bildergalerie[Bearbeiten]

Der auto-placement-Algorithmus eignet sich besonders für Listen und Galerien, bei denen die genaue Reihenfolge unwichtig ist. In dieser Bildergalerie werden die unterschiedlich großen Bilder auf den verfügbaren Platz verteilt. Durch grid-auto-flow: dense; wird das Raster lückenlos gefüllt.

Beispiel: Bildergalerie ansehen …
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(133px, 1fr));
  grid-gap: 10px;
  grid-auto-flow: dense;
}

.gallery figure.landscape {
  grid-column-end: span 2;
}

.gallery figure.panorama {
  grid-column-end: span 3;
}
In diesem Beispiel findet das entscheidende CSS nur im Elternelement statt:
  • display: grid; macht das div mit der id gallery zum Grid Container
  • grid-template-columns: repeat(auto-fill, minmax(133px, 1fr)); erzeugt Spalten, die mindestens 133px breit sind. Wenn die Gesamtbreite größer als ein Vielfaches der Mindestbreite ist, sodass normalerweise rechts ein Rand bliebe, vertielen die Spalten sich jedoch gleichmäßig über den verfügbaren Platz.
  • grid-auto-flow: dense; füllt das Raster lückenlos mit weiter hinten im Markup stehenden Elementen auf.


Neben dem Portrait-Modus, der eine Zelle umfasst, gibt es noch ein landscape-Format, das sich durch grid-column-end: span 2; über zwei, sowie ein panorama-Format, das sich über 3 Zellen erstreckt.
.gallery figure {
  border: 1px solid #ccc;
  position: relative;	
  margin: 0;
  counter-increment: posMarkup;	
}

.gallery figure img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.gallery figure::after {
  content: counter(posMarkup, decimal);
  position: absolute;
  bottom: 0;
  color: red;
}
Die Bilder wurden in ein figure-Element verpackt, dass den browsereigenen Abstand durch margin: 0; normalisiert.

Die Bilder werden durch object-fit: cover; passend skaliert, ohne das Seitenverhältnis zu ändern.
Zur besseren Übersicht wie das Schlüsselwort dense kleinere Zellen in vorher entstandene Lücken platziert, wird in einem absolut positioniertem Pseudoelement die Reihenfolge jedes Bildes gekennzeichnet. Dabei werden zur Bildnummerierung CSS-Counter verwendet:

  • counter-increment erzeugt eine Variable, die dann im Pseudoelement :after über content: counter(posMarkup, decimal); wieder ausgegeben wird.

Masonry Tiles[Bearbeiten]

Eine moderne Variante einer Bildergalerie ist das Masonry Layout, indem Bilder sich innerhalb von flexiblen Spalten passend anordnen. Bis jetzt musste der Platzbedarf mit JavaScript verteilt werden - mit Grid Layout ist dies auch nur mit CSS möglich.

Der Webdesigner Kseso stellt in einem CodePen ein solches Layout vor:

Weblinks[Bearbeiten]