English version

Mit CSS Grid Layout ist es sehr einfach, Inhaltsboxen mit der gleichen Höhe über eine beliebige Anzahl von Zeilen zu gestalten. Alles, was Sie dazu brauchen, ist nur eine einfache Codezeile. In diesem kleinen Artikel werde ich Ihnen diese magische Zeile zeigen. Alle anderen Stile, um attraktive Cards oder auffällige Bildergalerien zu gestalten, bleiben Ihnen überlassen.

Code Basis

Ehrlich gesagt gibt es noch einige Zeilen mehr an Code zu erstellen – oder man kann ihn einfach per Copy & Paste übernehmen.

Der Code für die „equal height boxes“ mit CSS Grid Layout basieren auf einem Artikel, den ich bereits früher geschreiben habe; Sie können diesen Artikel hier finden:

• Bildergalerie erstellen mit CSS Grid Layout

Die HTML-Struktur

Der HTML-Code besteht aus einem Grid-Rahmen und einer Box, die den eigentlichen Inhalt enthält:

HTML-Code
<div class="auto-grid">
  <div class="grid-box">
    ...
  </div>
</div>

Der CSS-Code

Der entscheidende CSS-Code ist der folgende, den ich aus dem oben genannten Artikel kopiert und leicht angepasst habe:

CSS-Code
/* First the Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-gap: 1.5rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}

Zwischenresultat

Wie Sie im Beispiel unten sehen können, weisen die Spalten in einer Zeile dieselbe Höhe auf, zugleich sind die Spalten in der zweiten Zeile höher als die in der ersten Zeile.

Der maßgebliche Code

Nun füge ich noch eine weitere CSS-Codezeile in den Codeschnipsel ein, um gleich hohe Spalten über beliebig viele Boxen hinweg zu erhalten.

CSS-Code
/* Added code */
.gallery-grid {
  ...
  grid-auto-rows: 1fr;
}

Resultat

Jetzt haben alle Spalten, ob in der ersten oder in der zweiten Zeile, dieselbe Höhe.

Einige Erweiterungen

Grundsätzlich genügt das bereits. Aber wenn auf kleinen Bildschirmen lediglich eine Spalte existiert, dann brauchen wir nicht dieselbe Höhe für alle Boxen. Daher füge ich in den Code ein Media-Query ein, um das Featrue nur dann starten zu lassen, wenn es zwei oder mehr Spalten nebeneinander gibt. Ich lege fest, dass bis zu einer Bildschirmbreite von 16rem der Inhalt in nur einer Spalte angezeigt wird und folglich ab einer Bildschirmbreite größer als 16rem zwei oder mehr Spalten dargestellt werden:

CSS-Code
/* Media query */
@media screen and (min-width: 16rem) {
  .gallery-grid {
    grid-auto-rows: 1fr;
  }
}

Ein wenig Flexbox-Code

Wenn wir jedoch eine Box mit einem langen Text und eine Box mit einem kurzen Text haben, wie bekommen wir dann z. B. einen Button an den unteren Rand der beiden Boxen?

Um dieses Problem zu lösen, benötigen wir ein wenig CSS Flexbox-Code. Der Wrapper für alle Boxen ist der Container (div) mit der Klasse .auto-grid; der Inhalt befindet sich in dem div mit der Klasse .grid-box; und das Button-Element ist ein Kind dieser grid-box.

Zuerst definiere ich die grid-box als Flexbox-Container:

CSS-Code
/* CSS Flexbox */
.grid-box {
  display: flex;
  flex-flow: column nowrap;
  ...
}

Dann erstelle ich die Klasse .m-top, füge margin-top: auto in die Klasse ein (auf diese Weise kann ich die Klasse auch für andere Elemente nutzen) und gebe dem Button eben diese Klasse:

CSS-Code
/* Place elements at the bottom */
.m-top {
  margin-top: auto;
}

Nun, das mag genügen. Laden Sie sich den Code herunter und erweitern oder bauen ihn nach Ihren Vorstellungen um. Ich wünsche Ihnen viel Spaß dabei!

--> Hier geht es zur Demo-Seite.

--> Hier können Sie sich den vollständigen Code downloaden.

In dem ZIP-Ordner finden Sie den HTML- und den CSS-Code für die „equal height columns“ mit CSS Grid Layout.