CSS GRID Tipps: Zellen gleicher Höhe, leere Zeilen

Alle Grid-Zellen mit gleicher Höhe

Genauso wie bei display:flex erstrecken sich die Zellen einer Zeile immer auf die Höhe der höchsten Zelle, gleich wie hoch der Inhalt ist.

Aber während flex nur die Zellen einer Zeile auf dieselbe Höhe bringt, hievt display: grid alle Zellen auf das Maß der höchsten Zelle (falls genug Platz vorhanden ist).

.grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 1fr;
}

In IE10/IE11 funktioniert grid-auto-rows: 1fr nicht. Zwar zieht auch IE11 alle Zellen einer Zeile auf dieselbe Höhe, aber nicht alle Zellen eines Grids.

Leere Grid-Zellen

Leere Zellen entstehen durch einen Punkt ".".

grid-template-areas: "cell-1 cell-2 cell-3"
                     ".      cell-4 cell-4"
                     "cell-5 cell-5 cell-5";

Leere Zeilen in einem GRID

Der am wenigsten invasive Weg zu leeren Zeilen ist ein leeres Tag, z.B. ein leeres b-Tag. Das b-Tag hat keine semantische Bedeutung mehr, ist kurz und knackig und kann ans Ende des Grids als letztes Element eingesetzt werden.

grid-template-areas: "cell-1 cell-2 cell-3"
                     "b      b      b"
                     "cell-4 cell-5 cell-6"
                     "cell-7 cell-8 cell-9";

Das leere b-Tag mag als nicht ganz 100% korrektes HTML erscheinen – ist aber immer noch besser als Abstandhalter als die zahllosen Wrapper-Tags.

Für IE11 braucht b display:block.

.emptyrows b {
    -ms-grid-row: 2; 
    -ms-grid-column: 1; 
    -ms-grid-column-span: 3;
    display: block;
}

Produktbilder im CSS-GRID

Weniger Wrapper oder HTML-Container-Elemente gehört zu den Vorteilen von CSS-Grid gegenüber Flexboxen. Das macht sich dort bemerkbar, wo ein Layout komplexer ist als »n Elemente in einer Zeile«.

<figure>		
	<div class="product-gallery__image">
		<img  >
	</div>
	<div  class="product-gallery__image">
		<img   >
	</div>
	<div class="product-gallery__image">
		<img   >
	</div>
	<div class="product-gallery__image">
		<img   >
	</div>
</figure>

Auf kleinen Monitoren sind die Bilder mit display:flex in zwei Zeilen angeordnet, auf großen Monitoren mit display: grid in zwei Spalten.

.product-gallery__wrapper {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	max-width: 450px;
}

.product-gallery__image:nth-child(1) {width: 100%}
.product-gallery__image:nth-child(2),
.product-gallery__image:nth-child(3),
.product-gallery__image:nth-child(4)  {width: 32%; }

.product-gallery__image img {width:100%}

@media (min-width: 980px) {
	.product-gallery__wrapper {
		display:grid;
		grid-template-columns: 1fr 4fr;
		grid-template-areas: "small1 large"
							 "small2 large"
							 "small3 large";
		column-gap: 10px;
		max-width: 720px;
	}
	
	.product-gallery__image:nth-child(1) {grid-area: large; width: 100%}
	.product-gallery__image:nth-child(2) {grid-area: small1; width: 100%}
	.product-gallery__image:nth-child(3) {grid-area: small2; width: 100%; align-self: center;}
	.product-gallery__image:nth-child(4) {grid-area: small3; width: 100%; align-self: end; }
}

Einfaches Rezept für den Nachzug von IE11

.demogrid { 
    display: -ms-grid;
    display: grid;
	
    -ms-grid-columns: 2fr 1fr 1fr;
    grid-template-columns: 2fr 1fr 1fr; 
    grid-template-areas:    "cell-1 cell-2 cell-2"
                            "cell-3 cell-4 cell-5"
                            "cell-6 cell-6 cell-7";
    grid-auto-rows: 1fr;
}

.cell-1 { 
    -ms-grid-row: 1; 
    -ms-grid-column: 1; 
    -ms-grid-column-span: 1; 
    background: brown; 
    grid-area: cell-1;
}

.cell-2 { 
    -ms-grid-row: 1; 
    -ms-grid-column: 2; 
    -ms-grid-column-span: 2;
    background: green; 
    grid-area: cell-2;
}

.cell-3 { 
    -ms-grid-row: 2; 
    -ms-grid-column: 1; 
    -ms-grid-column-span: 1;
    background: cyan; 
    grid-area: cell-3;
}