CSS grid-template-columns দিয়ে কলামের প্রস্থ নির্ধারণ করুন

grid-template-columns প্রোপার্টি গ্রিড লেয়াউটে কলামের সংখ্যা এবং প্রতিটি কলামের প্রস্থ নির্ধারণ করে।

উদাহরণ

নিচের কোডটি চালিয়ে কলাম প্রস্থ সেট করার উদাহরণ দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .container { 
        display: grid; 
        background-color: gray; 
        grid-template-columns: 120px 80px 50px; 
        padding: 20px; 
        grid-gap: 20px; 
      } 
      .container > div { 
        background-color: yellow; 
        border: 2px solid gray; 
        padding: 35px; 
        font-size: 30px; 
        text-align: center; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Game Board</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>

ব্যাখ্যা: grid-template-columns: 120px 80px 50px তিনটি কলাম তৈরি করেছে যাদের প্রস্থ যথাক্রমে ১২০, ৮০ এবং ৫০ পিক্সেল। ৬টি আইটেম ৩ কলাম × ২ সারি গ্রিডে সাজবে। fr ইউনিট (যেমন 1fr 2fr 1fr) ব্যবহার করে অনুপাতিক কলাম প্রস্থ দেওয়া যায়।