CSS Grid Elements (গ্রিড এলিমেন্টস)

CSS Grid-এ প্যারেন্ট (কন্টেইনার) এবং চাইল্ড (আইটেম) এলিমেন্ট থাকে। নিচে ৬টি এলিমেন্ট দিয়ে গ্রিড তৈরি করার উদাহরণ দেওয়া হলো।

উদাহরণ

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        grid-template-columns: auto auto; 
        padding: 20px; 
      } 
      .ele { 
        background-color: orange; 
        border: 2px solid gray; 
        padding: 25px; 
        font-size: 20px; 
        text-align: center; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Game Board</h1> 
    <div class="container"> 
      <div class="ele">1</div> 
      <div class="ele">2</div> 
      <div class="ele">3</div> 
      <div class="ele">4</div> 
      <div class="ele">5</div> 
      <div class="ele">6</div> 
    </div> 
  </body> 
</html>

ব্যাখ্যা: .container প্যারেন্ট গ্রিড কন্টেইনার। grid-template-columns: auto auto দুটি কলাম তৈরি করে যারা কন্টেন্ট অনুযায়ী প্রস্থ নেবে। ৬টি চাইল্ড এলিমেন্ট (.ele) স্বয়ংক্রিয়ভাবে ২ কলাম × ৩ সারি গ্রিডে সাজবে।