CSS Grid – Beispiel (mit IE Syntax)

display: grid mit IE: Schiffe versenken

Internet Explorer war der erste Browser, der das native Grid aus einem frühen Vorschlag des W3c implementierte. Die Implementierung des GRID-Layouts in IE10, IE11 und alter Versionen von Microsoft Edge basiert aber immer noch auf der Spezifikation von 2011.

In der Zwischenzeit erweiterte das W3C die Spezifikation, aber die Implementierung in IE11 sitzt festgemauert in der ursprünglichen Empfehlung. display grid mit IE11 fühlt sich an wie Schiffe versenken.

Die Grid-Spezifikation wirde zwar erweitert, Microsoft Edge wurde Ende 2017 auf den neusten Stand gebracht, aber zum Glück in Hinsicht auf IE11 blieben die Konzepte stabil. So läßt sich ein einfaches Raster im Grid-Layout auch für IE11 einrichten.

Da Microsoft IE11 noch einige Jahre unterstützten wird, müssen wir uns um die alte Grid-Syntax aus dem W3C Working Draft 7 April 2011 kümmern, wenn wir ein Grid-Raster für das Seitenlayout nutzen wollen.

Beispiel: einfaches responsives Grid-Layout für alle

Das Beispiel setzt 12 Grid-Spalten für ein Layout-Raster mit zwei, drei oder vier Spalten. Für die Microsoft-Browser braucht das Grid-Raster noch den ms-Browser-Präfix.

Layout-Raster mit 12 Spalten
grid-template-columns: repeat(12, 1fr);
-ms-grid-columns: repeat(12, 1fr);

Das klingt einfach, beherbergt aber schon den ersten bedeutenden Unterschied: Für Chrome, Firefox und Safari erzeugt grid-gap den Abstand zwischen den Spalten und erspart jegliches Gehampel mit margin, grid-gap, grid-column-gap und grid-row-gap gab es aber in der ursprünglichen Empfehlung der Spezifikation noch nicht.

Anstelle dessen brauchen IE und und alte Versionen von MS Egde zusätzliche Tracks – Zeilen und Spalten.

Für IE10,IE11 und Edge braucht das Grid zusätzliche Linien, um Abstände zwischen die Spalten zu setzen.

Die Syntax für die Wiederholung der Spaltenbreite weicht in den Microsoft-Browsern von der neuen Syntax ab. Nichts wirklich Bewegendes …

-ms-grid-columns: 8fr (3fr 8fr)[11];

Die 12 Spalten setzen sich zusammen aus einer ersten Spalte, gefolgt von 11 Abständen + Spalten.

Das Beispiel setzt 2, 3 und 4 Spalten in das Layout. Auf kleinen Monitoren ist das Layout linear.

  • Der erste Breakpoint setzt zwei Spalten in Zeile 1.
  • Der zweite Breakpoint setzt drei Spalten in Zeile 2 und jeweils 2 Spalten in Zeile 3 und 4.
  • Der dritte Breakpoint setzt führt die letzten beiden Zeilen zu einer Zeile mit vier Spalten zusammen.
<div class="reframe">
	<section class="col-1-7">
		<h3>2 Spalten</h3>
		<pre>col-1-7</pre>
	</section>
	
	<section class="col-7-13">
		<h3>2 Spalten</h3>
		<pre>col-7-13</pre>
	</section>
	
	<!-- 3 Spalten -->
	<section class="col-1-5">
		<h3>3 Spalten</h3>
		<pre>col-1-5</pre>
	</section>
		
	<section class="col-5-9">
		<h3>3 Spalten</h3>
		<pre>col-5-9</pre>
	</section>
	
	<section class="col-9-13">
		<h3>3 Spalten</h3>
		<pre>col-9-13</pre>
	</section>
	
	<!-- 4 Spalten -->
	<section class="col-1-4">
		<h3>4 Spalten</h3>
		<pre>col-1-4</pre>
	</section>
	
	<section class="col-4-7">
		<h3>4 Spalten</h3>
		<pre>col-4-7</pre>
	</section>
	
	<section class="col-7-10">
		<h3>4 Spalten</h3>
		<pre>col-7-10</pre>
	</section>
	
	<section class="col-10-13">
		<h3>4 Spalten</h3>
		<pre>col-10-13</pre>
	</section>	
</div>

Das CSS für das einfache Layout-Raster ist einfach. Aber der Schreibaufwand erhöht sich, weil IE11 und alte Versionen von Edge die Inhalte nicht automatisch in die nächste Zeile platzieren, wenn das Ende einer Zeile erreicht ist.

Jeder einzelne Block muss in seine Schublade gesetzt werden, denn sonst würden die Browser alles übereinander in die erste Zeile packen. Das erhöht zwar den Schreibaufwand, das HTML bleibt allerdings schlank und ohne großen Overhead.

@media (min-width: 480px) {
	.reframe {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: repeat(12, 1fr);
		-ms-grid-columns: 8fr (3fr 8fr)[11];
		grid-template-columns: repeat(12, 1fr);
		grid-gap: 2em;
	}

	.col-1-5,.col-5-9,.col-9-13,.col-1-4,.col-4-7,.col-7-10,.col-10-13 {
		grid-column: 1 / span 12;
		-ms-grid-column-span: 23;
	}
	
	.col-1-5 {
		-ms-grid-row: 2;
	}
	.col-5-9 {
		-ms-grid-row: 3;
	}
	.col-9-13 {
		-ms-grid-row: 4;
	}
	
	.col-1-4 {
		-ms-grid-row: 5;
	}
	
	.col-4-7 {
		-ms-grid-row: 6;
	}
	
	.col-7-10 {
		-ms-grid-row: 7;
	}
	
	.col-10-13 {
		-ms-grid-row: 8;
	}
	
	.col-1-7 {
		grid-column: 1 / span 6;
		-ms-grid-column: 1;
		-ms-grid-row: 1;
		-ms-grid-column-span: 11;
		background: ivory;
	}
	
	.col-7-13 {
		grid-column: 7 / span 6;
		-ms-grid-column: 13;
		-ms-grid-row: 1;
		-ms-grid-column-span: 11;
		background: ivory; 
	}
}
@media (min-width: 680px) {
	.col-1-5 {  /** 3 Spalten **/
		grid-column: 1 / span 4;
		-ms-grid-column: 1;
		-ms-grid-row: 2;
		-ms-grid-column-span: 7;
	}
	
	.col-5-9 {	/** 3 Spalten **/
		grid-column: 5 / span 4;
		-ms-grid-column: 9;
		-ms-grid-row: 2;
		-ms-grid-column-span: 7;
	}
	
	.col-9-13 {	/** 3 Spalten **/
		grid-column: 9 / span 4;
		-ms-grid-column: 17;
		-ms-grid-row: 2;
		-ms-grid-column-span: 7;
	}
	
	.col-1-4 {
		grid-column: 1 / span 6;
		-ms-grid-column: 1;
		-ms-grid-row: 3;
		-ms-grid-column-span: 11;
	}
	
	.col-4-7 {
		grid-column: 7 / span 6;
		-ms-grid-column: 13;
		-ms-grid-row: 3;
		-ms-grid-column-span: 11;
	}
	
	.col-7-10 {
		grid-column: 1 / span 6;
		-ms-grid-column: 1;
		-ms-grid-row: 4;
		-ms-grid-column-span: 11;
	}
	
	.col-10-13 {
		grid-column: 7 / span 6;
		-ms-grid-column: 13;
		-ms-grid-row: 4;
		-ms-grid-column-span: 11;
	}
}
	
@media (min-width: 1024px) {
	.col-1-7 {
		grid-column: 1 / 7;
		-ms-grid-column: 1;
		-ms-grid-column-span: span 11;
	}
	
	.col-7-13 {
		grid-column: 7 / 13;
		-ms-grid-column: 13;
		-ms-grid-column-span: 11;
	}
	
	.col-1-4 {
		grid-column: 1 / span 3;
		-ms-grid-column: 1;
		-ms-grid-row: 3;
		-ms-grid-column-span: 5;
	}
	
	.col-4-7 {
		grid-column: 4 / span 3;
		-ms-grid-column: 7;
		-ms-grid-row: 3;
		-ms-grid-column-span: 5;
	}
	
	.col-7-10 {
		grid-column: 7 / span 3;
		-ms-grid-column: 13;
		-ms-grid-row: 3;
		-ms-grid-column-span: 5;
	}
	
	.col-10-13 {
		grid-column: 10 / span 3;
		-ms-grid-column: 19;
		-ms-grid-row: 3;
		-ms-grid-column-span: 5;
	}
}

Mankos in IE11 / alte Versionen von EDGE

Es gibt viele Techniken, die es IE11 nicht gibt.

  • Es gibt kein Auto-Placement, jeder Block muss individuell in ein Rasterelement platziert werden.
  • Neben grid-gap fehlen die grid-template-areas, die ein Layout zusammenhängend und gut verständlich aufbauen.
.grid {
  display: grid;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 10em auto 10em;
  grid-gap: 2em;
  
  grid-template-areas: "header   header   header"
                       "main     main     sidebar"
                       "footer   footer   footer";
}

Die volle Flexibilität des Grids nutzen

IE11 verhindert also, dass wir das einfachste aller Grid-Layouts nutzen können, das ohne einen einzige Breakpoint eine Blog-Seite oder eine Produktübersicht umsetzt.

.options-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
   grid-gap: 2vw;
   font-size:smaller
}
Waschmaschine

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kochen

Maecenas sed nunc et erat ornare fringilla accumsan in massa.

Laken

Duis lacinia tempor nulla in mollis.

Vivamus iaculis aliquet consequat.

Mikrowelle

Donec nibh ante, convallis ut rhoncus vel, molestie quis magna.

Handy

Pellentesque condimentum sapien at malesuada sodales.

Einkaufen

In tincidunt interdum arcu sed tincidunt.

Kaffeemaschine

Morbi nec accumsan lacus, eget sodales dolor.

Fernseher

Nam sit amet odio massa.

Wasserkocher

Vivamus imperdiet augue quis justo feugiat elementum. Nunc condimentum ex at feugiat posuere.

Staubsauger

Integer sit amet quam sed ante vestibulum vulputate. Fusce condimentum, enim vel suscipit finibus.

123456789101112 357911131517192121