CSS দিয়ে সমান উচ্চতার কলাম তৈরি

CSS টেবিল ডিসপ্লে প্রোপার্টি ব্যবহার করে সমান উচ্চতার কলাম তৈরি করা খুব সহজ এবং ব্রাউজার সাপোর্ট ভালো।

উদাহরণ: সমান উচ্চতার কলাম

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .container {
    display: table;
    width: 100%;
  }
  .column {
    display: table-cell;
    padding: 16px;
    background-color: greenyellow;
  }
  .column:nth-of-type(2n-1) {
    color: red;
    background-color: yellow;
  }
</style>
</head>
<body>
  <h1>সমান উচ্চতার কলাম উদাহরণ</h1>
  <div class="container">
    <div class="column">
      <h2>কলাম ১</h2>
      <h2>কলাম ১</h2>
      <h2>কলাম ১</h2>
    </div>
    <div class="column">
      <h2>কলাম ২</h2>
      <h2>কলাম ২</h2>
      <h2>কলাম ২</h2>
    </div>
    <div class="column">
      <h2>কলাম ৩</h2>
      <h2>কলাম ৩</h2>
      <h2>কলাম ৩</h2>
    </div>
  </div>
</body>
</html>

কোড ব্যাখ্যা

• display: table (কন্টেইনারে): টেবিল রendrerিং মোড সক্রিয় করে।
• display: table-cell (কলামে): প্রতিটি কলাম টেবিল সেলের মতো বরতাব করে, ফলে স্বয়ংক্রিয়ভাবে সমান উচ্চতা পায়।
• nth-of-type(2n-1): বিজোড় নম্বরের কলামের রঙ আলাদা করা হয়েছে।

আধুনিক বিকল্প

Flexbox (`display: flex; align-items: stretch`) বা CSS Grid (`grid-template-columns: repeat(3, 1fr)`) ব্যবহার করলেও সমান উচ্চতা পাওয়া যায়, যা আরও লচীলা।