CSS দিয়ে রেসপন্সিভ গ্রিড-ভিউ তৈরি করুন

রেসপন্সিভ গ্রিড-ভিউ তৈরি করতে box-sizing: border-box, পার্সেন্টেজ-ভিত্তিক প্রস্থ এবং float (পুরানো পদ্ধতি) বা আধুনিকভাবে flexbox/grid ব্যবহার করা হয়।

উদাহরণ (ফ্লোট-ভিত্তিক)

নিচের কোডটি চালিয়ে ফ্লোট-ভিত্তিক রেসপন্সিভ গ্রিড-ভিউ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <style> 
      * { 
        box-sizing: border-box; 
      } 
      .header { 
        border: 1px solid black; 
        padding: 10px; 
      } 
      .leftmenu { 
        width: 30%; 
        float: left; 
        padding: 10px; 
        border: 1px solid black; 
      } 
      .content { 
        width: 70%; 
        float: left; 
        padding: 10px; 
        border: 2px dotted black; 
      } 
    </style> 
  </head> 
  <body> 
    <div class="header"> 
      <h1>Header</h1> 
    </div> 
    <div class="leftmenu"> 
      <ul> 
        <li>Menu One</li> 
        <li>Menu Two</li> 
        <li>Menu Three</li> 
        <li>Menu Four</li> 
        <li>Menu Five</li> 
        <li>Menu Six</li> 
        <li>Menu Seven</li> 
        <li>Menu Eight</li> 
        <li>Menu Nine</li> 
        <li>Menu Ten</li> 
      </ul> 
    </div> 
    <div class="content"> 
      <h1>Demo</h1> 
      <p>This is demo text...</p> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: box-sizing: border-box প্যাডিং ও বর্ডারকে প্রস্থের মধ্যে অন্তর্ভুক্ত করে। float: left দিয়ে সাইডবার (৩০%) এবং কন্টেন্ট (৭০%) পাশাপাশি রাখা হয়েছে। মোবাইলে মিডিয়া কোয়েরি দিয়ে width: 100% করে স্ট্যাক করা উচিত। আধুনিকভাবে CSS Grid বা Flexbox ব্যবহার করা ভালো।