কম্পিউটার টিউটোরিয়াল

CSS দিয়ে কলাম লেআউট তৈরি করুন

একটি কলাম লেআউট তৈরি করতে:

সম্পূর্ণ ডকুমেন্টের মার্জিন এবং প্যাডিং নিচের মতো সেট করুন:

<style>
  <!--
    body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
    }
  -->
</style>

প 어딘ো রঙের একটি কলাম ডিফাইন করুন এবং পরে এটিকে একটি <div> এর সাথে সংযুক্ত করুন:

<style>
  <!--
    #level0 {
      background:#FC0;
    }
  -->
</style>

এখন level0-এর ভিতরে আরেকটি ডিভিশন ডিফাইন করুন:

<style>
  <!--
    #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
    }
  -->
</style>

আরেকটি ডিভিশন নেস্ট করুন এবং সম্পূর্ণ কোড হবে নিচের মতো:

<style>
  body { margin:9px 9px 0 9px; padding:0; background:#FFF; }
  #level0 { background:#FC0; }
  #level1 { margin-left:143px; padding-left:9px; background:#FFF; }
  #level2 { background:#FFF3AC; }
  #level3 { margin-right:143px; padding-right:9px; background:#FFF; }
  #main { background:#CCC; }
</style>
<body>
  <div id="level0">
    <div id="level1">
      <div id="level2">
        <div id="level3">
          <div id="main">
            Final Content goes here...
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
  1. CSS দিয়ে রিসপন্সিভ কলাম কার্ড (Responsive Column Cards) তৈরি করা

  2. CSS দিয়ে মিক্সড কলাম লে আউট গ্রিড (Mixed Column Layout Grid) তৈরি করা

  3. CSS দিয়ে ৪-কলাম লেআউট গ্রিড (4-Column Layout Grid) তৈরি করা

  4. CSS clip-path ব্যবহার করে ট্রায়্যাঙ্গেল (Triangle) তৈরি করা