Card-Grid mit gleicher Höhe

Ein Raster aus Cards sieht so lange gut aus, bis die Texte unterschiedlich lang sind. Dann franst die Zeile unten aus, und der Blick findet keine Kante mehr.

Drei Zutaten lösen das. Erstens h-100 an der Card: sie füllt damit die volle Höhe ihrer Spalte, und weil die Spalten einer Zeile ohnehin gleich hoch sind, sind es auch die Karten. Zweitens row-cols am umgebenden Grid statt einzelner col-Angaben – das hält die Anzahl pro Zeile über alle Breakpoints hinweg einheitlich.

Drittens ein fester Bildzuschnitt. Ein Bild, das mit fester Breite und Höhe beschnitten wird, liefert in jeder Karte dasselbe Seitenverhältnis; ohne das verschiebt sich die Überschrift von Karte zu Karte.

Bleibt der Button am Ende. Damit er in allen Karten auf gleicher Höhe sitzt, bekommt der Card-Body d-flex flex-column und der Button-Bereich mt-auto – der freie Platz sammelt sich dann oberhalb des Buttons statt darunter.