presscode Projekt anfragen

Einheitliche Karten: Buttons in Spalten am unteren Rand ausrichten

Buttons in Karten auf einer gemeinsamen Linie ausrichten

Wenn Karten unterschiedlich viel Text enthalten, stehen ihre Buttons ohne zusätzliche Layout-Regeln oft auf verschiedenen Höhen. Mit einem Flexbox-Aufbau lässt sich der Inhaltsbereich flexibel strecken und der Button an das Ende der Karte setzen.

Richte den äußeren Kartencontainer als Spalte aus und gib dem Button-Wrapper bei Bedarf margin-top: auto. Achte darauf, dass die Karten selbst dieselbe Höhe einnehmen oder innerhalb eines gleich hohen Grid-Layouts liegen.

Wrapping Container: flex = column und height = 100%
Button: margin-top = auto

check https://generatetweaks.ogal.dev/consistent-cards/

Siehe auch Mike Oliver in der Community „Bottom Aligning Buttons on Blog Cards & Pricing Tables„