এখানে দেখানো মূল বিষয় হল 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
}