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

নেমড CSS Grid আইটেম দিয়ে কলাম ও সারি প্রদর্শন করা

নেমড CSS গ্রিড ব্যবহার করে কলাম ও সারি প্রদর্শনের জন্য grid-area প্রোপার্টি grid-template-areas প্রোপার্টির সাথে ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          .container {             display: grid;             background-color: green;             grid-template-areas: 'demo demo . . .' 'demo demo . . .';             padding: 20px;             grid-gap: 10px;          }          .container > div {             background-color: orange;             text-align: center;             padding: 10px 0;             font-size: 20px;          }          .ele1 {             grid-area: demo;          }       </style>    </head>    <body>       <h1>গেম বোর্ড</h1>       <div class = "container">          <div class = "ele1">1</div>          <div class = "ele2">2</div>          <div class = "ele3">3</div>          <div class = "ele4">4</div>          <div class = "ele5">5</div>          <div class = "ele6">6</div>       </div>    </body> </html>
  1. CSS এবং JavaScript দিয়ে এক্সপ্যান্ডিং গ্রিড (Expanding Grid) তৈরি করা

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

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

  4. Tkinter-এ গ্রিডের নির্দিষ্ট সংখ্যক রো এবং কলাম সেট করার পদ্ধতি