CSS column-count প্রোপার্টি দিয়ে এলিমেন্টকে কলামে ভাগ করা

column-count প্রোপার্টি দিয়ে কোনো এলিমেন্টের কন্টেন্ট কতটি কলামে প্রদর্শিত হবে তা নির্ধারণ করা যায়। এটি মাল্টি-কলাম লেআউট তৈরির জন্য খুবই কার্যকর।

উদাহরণ

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo {
        column-count: 4;
      }
    </style>
  </head>
  <body>
    <div class="demo">
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text. This is demo text. This is demo text.
      This is demo text.
    </div>
  </body>
</html>

সম্পর্কিত প্রোপার্টি: column-gap (কলামের মাঝপথি দূরত্ব), column-rule (কলামের মাঝপথি রেখা), column-width (প্রতিটি কলামের প্রস্থ)।