CSS-Grids: Raster im IE10+ und in neuer Syntax definieren

css-grids

CSS-Grids sind das CSS3-Layoutmodul für Raster. Relevant sind heute zwei Versionen von CSS-Grids: die aktuelle Spezifikation und die veraltete Version von 2011.

Die aktuelle Version funktioniert in Chrome/Opera, wenn man die Einstellung „Experimentelle Webplattformfunktionen aktivieren“ gewählt hat und in Webkit-Nighties. Sie funktionierten außerdem im Firefox ab Version 40, wenn man in den  Einstellungen (about:config) den entsprechenden Flag aktiviert (layout.css.grid.enabled).  Wenn man den Prognosen glaubt, werden diese Browser aber in diesem Jahr noch CSS-Grids direkt unterstützen.

Die veraltete Version ist im Internet Explorer 10+ implementiert und deswegen ist diese alte Syntax heute noch relevant.

An einem kleinen Raster möchte ich ein paar Beispiele für die unterschiedliche Syntax/Herangehensweise zeigen.

Erstellt werden soll das folgende Raster: Wir haben drei Spalten und drei Zeilen. Element 1 reicht über alle drei Spalten, Element 4 erstreckt sich über zwei Zeilen. Die Elemente 2, 3, 5 und 6 nehmen jeweils nur eine Zelle ein.

CSS-Grids Beispiel

Beispiel für ein Rasterlayouts im IE10+ und Chrome

Die HTML-Basis sieht folgendermaßen aus: Es gibt ein umfassendes div mit der Klasse raster und darin sechs Kindelemente, mit den Klassennamen eins bis sechs.

<div class="raster">
<div class="eins">1</div>
<div class="zwei">2</div>
<div class="drei">3</div>
<div class="vier">4</div>
<div class="fuenf">5</div>
<div class="sechs">6</div>
</div>

Raster definieren

Zuerst müssen wir die Rasterdarstellung aktivieren, das machen wir für das umfassende Element – im  Beispiel hat es die Klasse .raster:

.raster {
display: -ms-grid;
display: grid;

Soweit gibt es keinen Unterschied zwischen den beiden Syntaxvarianten: In der aktuellen Syntax geht die Aktivierung der Rasterdarstellung über display: grid, für den IE10+ funktioniert es genauso, nur muss man das Präfix -ms- ergänzen.

Dann kommt die Definition der Spalten und Zeilen. Im Beispiel sind es drei Spalten, die dabei verwendeten Eigenschaften heißen unterschiedlich. Im alten Working-Draft (WD) hieß die Eigenschaft grid-columns (dementsprechend braucht man für den IE10 -ms-grid-columns), im neuen WD heißt es grid-template-columns:

-ms-grid-columns: 100px  150px  180px;
grid-template-columns: 100px  150px  180px;

Im neuen Working-Draft definiert man damit nicht eigentlich Spalten, sondern vertikale Rasterlinien. Die erste Linie (nicht angegeben) ist bei Position 0, die zweite bei 100px, die dritte 150px später, die letzte nach weiteren 180px etc.

Genauso definieren wir die drei Zeilen – die Eigenschaften heißen wieder unterschiedlich: grid-rows (-ms-grid-rows für den IE10+) im alten Working-Draft, grid-template-rows im aktuellen.

-ms-grid-rows: 100px  100px  200px;
grid-template-rows: 100px  100px  200px;
}/* Ende .raster */

Damit haben wir die Definition des Rasters abgeschlossen.

Elemente platzieren

Jetzt geht es an die Platzierung der einzelnen Elemente. Hier noch einmal, wie es aussehen soll.
CSS-Grids Beispiel
Beginnen wir mit .eins. Es soll sich in Form einer Kopfzeile über alle drei Spalten
erstrecken:

.eins {
-ms-grid-column: 1;
grid-column: 1 / 4;
-ms-grid-row: 1;
-ms-grid-column-span: 3;
grid-row: 1;
}

Sehen wir uns zuerst die -ms-Angaben an. Wir bestimmen mit -ms-grid-column und -ms-grid-row die Position des Elements (1. Spalte, 1.Zeile). Mit -ms-grid-column-span legen wir fest, dass das Element sich über 3 Spalten erstrecken soll.

In der neuen Syntax brauchen wir nur zwei Regeln. Hinter grid-column kommen zwei durch Slash getrennte Zahlen: bei welcher vertikalen Rasterlinie das Element beginnen soll (1) und wo es enden soll (4).  Bei grid-row ist nur eine Zahl angegeben, weil Elemente dann standardmäßig bei der nächsten Rasterlinie aufhören. Wir hätten aber auch statt grid-row: 1 schreiben können grid-row: 1/2.

Auf den ersten Blick irritiert, dass bei -ms-grid-column-span: 3 angegeben ist, bei der neuen Syntax hingegen hinter grid-column: 1/4. Das liegt daran, dass bei der ursprünglichen Version von CSS-Grids in Spalten gedacht wurde, in der neuen Version geht man hingegen von Rasterlinien aus. Und wenn sich ein Element von der ersten über die zweite bis zur dritten Spalte erstrecken soll, dann geht es von der ersten über die zweite und die dritte bis zur vierten Rasterlinie.

Alternativ zur Benennung der Rasterlinie kann man in der neuen Syntax auch das Schlüsselwort span mit der Anzahl an Spalten angeben. Statt

grid-column: 1 / 4;

kann man auch schreiben:

grid-column: 1 / span 3;

Im folgenden Bild habe ich zur Veranschaulichung einmal die Rasterlinien eingezeichnet, die zur Bestimmung der Position in der neuen Syntax verwendet werden. Blau sind die horizontalen Rasterlinien, rot die vertikalen.

CSS-Grid-Beispiel mit eingezeichneten Rasterlinien

Bei der Platzierung von .zwei  gibt es hingegen keine Besonderheiten. Dieses Element erstreckt sich nur über eine Zelle. Für den IE10+ bestimmen wir die Nummer der Spalte (2) und der Zeile (2). In der neuen Syntax sagen wir, dass das Element an der vertikalen Rasterlinie mit Nummer 2 und an der horizontalen Rasterlinie mit Nummer 2 beginnen soll.

.zwei {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 2;
grid-row: 2;
}

Parallel dazu funktioniert die Platzierung von .drei. Es soll nach der dritten vertikalen Rasterlinie beginnen und nach der zweiten horizontalen Linie. Für den IE10+ heißen die Angaben genauso, benennen aber wiederum die Nummer der Spalte/Zeile.

.drei {
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 2;
grid-row: 2;
}

Kommen wir zu .vier, das sich über zwei Zeilen erstrecken soll. Es soll nach der 1. vertikalen Rasterlinie beginnen (grid-column: 1). Außerdem soll es nach der zweiten horizontalen Rasterlinie beginnen und bis zur 4. reichen (grid-row: 2/4). Für den IE10+ benennen wir hingegen die Spalten/Zeile und legen durch die zusätzliche Eigenschaft -ms-grid-row-span: 2 fest, dass sich das Element über zwei Zeilen erstrecken soll.

.vier {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 2;
grid-row: 2 /4;
}

Bei .fuenf und .sechs sehen die  Definitionen wieder gleich aus:

.fuenf {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 3;
grid-row: 3;
}
.sechs {
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 3;
grid-row: 3;
}

Beispiel zum Austesten

Die neue Grid-Syntax erlaubt in vielen Punkten Variationen: so hätte man auch mit benannten Rasterlinien arbeiten können oder direkt mit benannten Bereichen. Solche Varianten waren in der ersten Version nicht vorgesehen.

Und das Spannende an CSS-Grids ist, dass man bei der Anordnung der Elemente vollkommen unabhängig ist von der Reihenfolge im Quellcode. Wir hätten das 1. Element zuletzt anordnen können oder das 5. vor dem 2. etc. etc.

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>