কম্পিউটার

CSS গ্রিড কন্টেইনারে প্রতিটি সারির উচ্চতা নির্ধারণ করুন


গ্রিড-টেমপ্লেট-সারি ব্যবহার করুন CSS গ্রিড লেআউটে সারির সংখ্যা নির্ধারণ করার জন্য সম্পত্তি।

উদাহরণ

আপনি কয়েকটি সারি সেট করতে নিম্নলিখিত কোডটি চালানোর চেষ্টা করতে পারেন।

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: gray;
            grid-template-rows: 120px 90px 100px;
            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>

  1. সিএসএস দিয়ে কন্টেইনারের শেষে ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন

  2. সিএসএস দিয়ে কন্টেইনারের শুরুতে ফ্লেক্স আইটেমগুলি সারিবদ্ধ করুন

  3. CSS সহ গ্রিড আইটেমগুলিতে নাম সেট করুন

  4. CSS সহ কন্টেইনারের শুরুতে ফ্লেক্স লাইনগুলি প্রদর্শন করুন