CSS Grid for beginners

CSS Grid একটি আধুনিক লেআউট সিস্টেম যা ওয়েব পেজে বিভিন্ন উপাদানকে নির্ধারিত গ্রিড ফরম্যাটে সাজানোর জন্য ব্যবহৃত হয়। এটি ২-ডাইমেনশনাল লেআউট তৈরি করতে সাহায্য করে, যেখানে উপাদানগুলোকে সারি (row) এবং কলাম (column) উভয়ের ভিত্তিতে সাজানো যায়। CSS Grid ব্যবহার করে, আপনি সহজেই জটিল এবং রেসপনসিভ লেআউট তৈরি করতে পারবেন।

CSS Grid এর মূল ধারণা
CSS Grid এ মূলত দুটি অংশ থাকে:

  1. Grid Container: যেটি মূলত একটি বড় div বা section, যেখানে গ্রিড লেআউট তৈরি করা হয়।
  2. Grid Items: যেগুলো সেই Grid Container-এর ভেতরে রাখা থাকে। প্রতিটি Grid Item একটি গ্রিড সেলের অংশ হয়ে থাকে।

CSS Grid প্রপার্টিজ
CSS Grid ব্যবহারের জন্য কিছু গুরুত্বপূর্ণ প্রপার্টিজ রয়েছে:

  1. display: grid - এটি Grid Container-কে নির্দেশ করে। এটি CSS এর মাধ্যমে একটি div বা অন্য কোনো উপাদানকে গ্রিড কন্টেইনারে পরিণত করে।

  2. grid-template-columns এবং grid-template-rows - এই প্রপার্টিগুলো গ্রিডের কলাম এবং সারি নির্ধারণ করতে ব্যবহৃত হয়।

           উদাহরণস্বরূপ:
           .container {
               display: grid;
               grid-template-columns: 200px 1fr 200px;
               grid-template-rows: 100px 1fr;
           }
    

এখানে প্রথমে দুটি ২০০ পিক্সেলের কলাম এবং একটি ‘flexible’ কলাম তৈরি করা হয়েছে। ‘1fr’ মানে বাকি স্থান পূরণ করা হবে।
4. grid-gap বা gap - এই প্রপার্টি Grid Items এর মধ্যে ফাঁক বা গ্যাপ তৈরি করতে ব্যবহৃত হয়:

  .container {
  gap: 10px;
  }

এটি সারি এবং কলামের মধ্যে ১০ পিক্সেল গ্যাপ তৈরি করবে।
5. grid-area - এটি একটি Grid Item কে নির্দিষ্ট সারি এবং কলামের মধ্যে স্থাপন করার জন্য ব্যবহৃত হয়:
.item {
grid-area: 1 / 2 / 3 / 4;
}
এখানে Grid Item প্রথম সারির ২য় কলাম থেকে ৩য় সারি পর্যন্ত প্রসারিত হবে।
রেসপনসিভ গ্রিড
CSS Grid খুব সহজেই রেসপনসিভ লেআউট তৈরি করতে পারে। Media queries ব্যবহার করে আপনি বিভিন্ন স্ক্রিন সাইজের জন্য ভিন্ন লেআউট তৈরি করতে পারেন।

 উদাহরণ:
@media (max-width: 600px) {
   .container {
       grid-template-columns: 1fr;
   }
}

এখানে ৬০০ পিক্সেলের নিচে স্ক্রিন সাইজ হলে গ্রিড লেআউট একটি কলামে রূপান্তরিত হবে।
উপসংহার
CSS Grid একটি শক্তিশালী লেআউট সিস্টেম যা জটিল লেআউট সহজেই তৈরি করতে সক্ষম করে। এটি flexbox-এর মত, তবে আরও বেশি নিয়ন্ত্রণ এবং ২-ডাইমেনশনাল লেআউট ডিজাইন করতে সহায়ক।

4 Likes

CSS Grid প্রাকটিস করার জন্য গ্রিড গার্ডেন গেমটা দারুণ

:arrow_forward: Grid Garden Game

2 Likes