סדר

הנקודה העיקרית שמודגמת כאן היא השימוש ב-justify-content: space-between, שממקם את רכיב הצאצא הראשון והרכיב האחרון בקצוות של התיבה התוחמת שלהם, כאשר הרווחים הנותרים מתחלקים באופן שווה בין הרכיבים. בכרטיסים האלה, הם ממוקמים במצב של תצוגת flexbox, והכיוון מוגדר לעמודה באמצעות flex-direction: column.

הפעולה הזו ממקמת את הכותרת, התיאור ובלוק התמונות בעמודה אנכית בתוך כרטיס ההורה. לאחר מכן, מחילים את justify-content: space-between עוגן לעיגון של הרכיב הראשון (שם הפריט) והאחרון (בלוק התמונה) לקצוות של מאגר התמונות הגמיש, והטקסט התיאורי שביניהם ימוקם עם ריווח זהה בין כל נקודת קצה.

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

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

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