लाइन अप

यहां दिखाया गया मुख्य बिंदु 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>

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
}