Ausrichten

Der hier gezeigte Hauptpunkt ist die Verwendung von justify-content: space-between. Dabei werden das erste und das letzte untergeordnete Element am Rand des Markierungsrahmens platziert, wobei der verbleibende Bereich gleichmäßig auf die Elemente verteilt ist. Für diese Karten werden sie im Flexbox-Anzeigemodus platziert, wobei die Richtung mithilfe von flex-direction: column auf die Spalte festgelegt wird.

Dadurch werden der Titel, die Beschreibung und der Bildblock in einer vertikalen Spalte innerhalb der übergeordneten Karte platziert. Durch die Anwendung von justify-content: space-between werden dann das erste Element (title) und das letzte Element (Bildblock) an den Rändern des Flex-Containers verankert. Der dazwischenliegende beschreibende Text wird mit dem gleichen Abstand zu jedem Endpunkt platziert.

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

HTML

<div class="container">
  <div class="card">
    <h3>Title - Card 1</h3>
    <p contenteditable>Medium length description with a few more words here.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 2</h3>
    <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 3</h3>
    <p contenteditable>Short Description.</p>
    <div class="visual"></div>
  </div>
</div>

CSS

        .container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.visual {
  height: 100px;
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}

h3 {
  margin: 0
}