CSS Grid প্লেগ্রাউন্ড

CSS Grid প্লেগ্রাউন্ড সম্পর্কে

CSS Grid Playground ভিজ্যুয়ালি বাস্তব গ্রিড লেআউট তৈরি করে। কলাম ও রো ট্র্যাক যোগ বা বাদ দিয়ে grid-template-columns এবং grid-template-rows গঠন করুন, কলাম ও রো গ্যাপ সেট করুন, এবং সবগুলো অ্যালাইনমেন্ট প্রপার্টি — justify-items, align-items, justify-content এবং align-content — ঠিক করুন, এবং প্রতিটি পরিবর্তন সাথে সাথে প্রিভিউতে দেখুন।

আইটেম প্লেসমেন্টেই গ্রিডের আসল শক্তি: আইটেম যোগ করুন, প্রিভিউতে একটি ক্লিক করে বেছে নিন, এবং column start, column span, row start ও row span দিয়ে এর অবস্থান ঠিক করুন। এভাবেই সাইডবার, হেডার এবং ফিচার সেল একাধিক ট্র্যাক জুড়ে বিস্তৃত হয় — প্রায় প্রতিটি বাস্তব গ্রিড লেআউটের পেছনের কৌশল এটাই।

তিনটি প্রিসেট — holy grail, dashboard এবং gallery — ক্লাসিক পেজ কাঠামো লোড করে, যা আপনি বিশ্লেষণ করে নিজের মতো করে সাজাতে পারেন। লেআউট ঠিক হয়ে গেলে, তৈরি হওয়া CSS কপি করুন, যাতে থাকে সম্পূর্ণ গ্রিড কন্টেইনার নিয়ম এবং প্রতিটি আইটেমের প্লেসমেন্ট।

CSS Grid প্লেগ্রাউন্ড কীভাবে ব্যবহার করবেন

1. গ্রিড টেমপ্লেট নির্ধারণ করতে কলাম ও রো ট্র্যাক যোগ বা বাদ দিন।
2. কলাম গ্যাপ ও রো গ্যাপ সেট করুন।
3. অ্যালাইনমেন্ট কন্ট্রোলগুলো ঠিক করুন: justify-items, align-items, justify-content এবং align-content।
4. আইটেম যোগ করুন, প্রিভিউতে একটি ক্লিক করুন, এবং এটি বসাতে এর column/row start ও span সেট করুন।
5. একটি ক্লাসিক লেআউট দেখতে holy grail, dashboard বা gallery প্রিসেট লোড করুন।
6. তৈরি হওয়া CSS আপনার স্টাইলশিটে কপি করুন।

সচরাচর জিজ্ঞাসিত প্রশ্ন