CSS Grid কী?
CSS Grid Layout আধুনিক ব্রাউজারে অন্তর্নির্মিত একটি দ্বি-মাত্রিক লেআউট সিস্টেম। display: grid দিয়ে গ্রিড কন্টেইনার সংজ্ঞায়িত করুন, তারপর grid-template-columns দিয়ে কলাম এবং grid-template-rows দিয়ে সারি নিয়ন্ত্রণ করুন। ভগ্নাংশ ইউনিট (fr) উপলব্ধ স্থান আনুপাতিকভাবে বিতরণ করে। শিশু আইটেমগুলি grid-column: span N এবং grid-row: span N ব্যবহার করে একাধিক কলাম বা সারি জুড়ে থাকতে পারে।
CSS Grid জেনারেটর কীভাবে ব্যবহার করবেন
-
সংখ্যা ইনপুট (প্রতিটি 1–12) ব্যবহার করে কলাম এবং সারির সংখ্যা সেট করুন।
-
আকার নিয়ন্ত্রণ করতে grid-template-columns এবং grid-template-rows সামঞ্জস্য করুন (যেমন: 1fr 2fr, 200px auto)।
-
সেলের মধ্যে ফাঁক সেট করুন (যেমন: 10px, 1rem)।
-
নির্বাচন করতে প্রিভিউতে যেকোনো সেলে ক্লিক করুন (কমলা হয়ে যায়)।
-
সেল স্প্যান প্যানেলে col-span এবং row-span সেট করুন, তারপর প্রয়োগ করুন ক্লিক করুন। স্প্যানিং সেলগুলি সবুজ হয়ে যায়।
-
আউটপুট ফরম্যাট পরিবর্তন করতে CSS বা HTML ট্যাব ক্লিক করুন, তারপর ক্লিপবোর্ডে কপি করুন।
-
নতুন 3×3 গ্রিড দিয়ে শুরু করতে সব রিসেট করুন ক্লিক করুন।