CSS, HTML und Javascript mit {stil}

CSS Grid – Beispiel (mit IE Syntax)

display: grid mit IE ist 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 Microsoft Edge basiert aber immer noch auf der Spezifikation von 2011. In der Zwischenzeit erweiterte das W3C die Spezifikation, aber die Implementierung in IE10 bis Edge steckt festgemauert in der ursprünglichen Empfehlung.

Zum Glück wurde die Spezifikation zwar erweitert, aber die Konzepte blieben stabil. So läßt sich ein einfaches Raster im Grid-Layout auch für Internet Explorer und Edge einrichten.

Wir können zwar davon ausgehen, dass Microsoft die Implementierung des Grid in Edge auf den neusten Stand nachzieht, wohl kaum aber für IE 11. Da Microsoft IE11 noch einige Jahre unterstützten wird, müssen wir uns um die alte 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, 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 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. Ein wenig mehr Schreibaufwand, weil IE10, IE11 und 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.

Dennoch hält sich der Schreibaufwand für das CSS in Grenzen, das HTML bleibt schlank und ohne jeglichen 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;
	}
}

Es gibt viele Techniken, die es in den Microsoft-Browsern 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";
}
display: grid Battleship IE 123456789101112 357911131517192121