به صف شدن

نکته اصلی که در اینجا نشان داده شده است استفاده از justify-content: space-between است که اولین و آخرین عنصر فرزند را در لبه‌های جعبه مرزی خود قرار می‌دهد و فضای باقی‌مانده به طور مساوی بین عناصر توزیع می‌شود. برای این کارت‌ها، آنها در حالت نمایش فلکس‌باکس قرار می‌گیرند و جهت آن بر روی ستون با استفاده از 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
}