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

Tipps und Beispiele für Grid-Layouts

Tipps für CSS-Grid: Zellen gleicher Höhe, leere Zeilen, Produktbilder im Grid ausrichten und Tipps für die letzten treuen Anhänger von IE11

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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;
}
cell 1
Jujubes lemon drops pastry. Topping chupa chups marzipan wafer soufflé biscuit sugar plum gummi bears. Dessert croissant caramels croissant sesame snaps tart.
cell 2
cell 3
cell 4
cell 5
cell 6
cell 7

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 ".".

cell 1
cell 2

cell 3
cell 4
cell 5
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.

cell 1
cell 2
cell 3
cell 4
cell 5
cell 6
cell 7
cell 8
cell 9
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.

Kleine Monitore: Zwei Zeilen
.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%}
Große Monitore: Zwei Spalten
@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

grid-template-areas setzen ein Grid-Layout übersichtlich in Kraft.

.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;
}

Für die modernen Browser reicht schon die Zuweisung der Elemente zu einer Grid-Template-Area.

.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;
}

-ms-grid-column-span: 1 ist default und optional.