CSS Grid জেনারেটর কী?
ফ্রি অনলাইন CSS Grid জেনারেটর। ভিজুয়াল এডিটরের মাধ্যমে CSS Grid লেআউট তৈরি এবং সামঞ্জস্য করুন।
CSS গ্রিড একটি শক্তিশালী 2D লেআউট সিস্টেম যা আপনাকে একই সাথে সারি ও কলামে কন্টেন্ট সাজাতে দেয়, যা জটিল পেজ লেআউট, ড্যাশবোর্ড এবং রেসপন্সিভ ডিজাইনের জন্য আদর্শ। CSS গ্রিড জেনারেটর হাতে CSS লেখা ছাড়াই গ্রিড লেআউট তৈরির জন্য একটি ভিজুয়াল ইন্টারফেস প্রদান করে, সাথে একটি লাইভ প্রিভিউ যা আপনি সেটিংস সামঞ্জস্য করার সাথে সাথে আপডেট হয়।
স্লাইডার ব্যবহার করে কলামের সংখ্যা (1-12) এবং সারির সংখ্যা (1-12) সেট করুন। প্রতিটি সমন্বয় আপনার গ্রিড আইটেম প্রতিনিধিত্বকারী সংখ্যাযুক্ত সেলসহ একটি তাৎক্ষণিক প্রিভিউ দেখায়। কলাম এবং সারি গ্যাপ নিয়ন্ত্রণ আপনাকে গ্রিড সেলের মধ্যে ব্যবধান যোগ করতে দেয়, 0 থেকে 50 পিক্সেল পর্যন্ত। এগুলো সামঞ্জস্য করুন এবং প্রিভিউ সেলগুলো ব্যবধান বাড়ানো বা কমানো দেখুন।
অ্যালাইনমেন্ট নিয়ন্ত্রণ justify-items (প্রতিটি সেলের মধ্যে অনুভূমিক অ্যালাইনমেন্ট) এবং align-items (প্রতিটি সেলের মধ্যে উল্লম্ব অ্যালাইনমেন্ট) সেট করে। বিকল্পগুলোর মধ্যে রয়েছে start, end, center, stretch এবং baseline। এই প্রপার্টিগুলো নিয়ন্ত্রণ করে কীভাবে কন্টেন্ট প্রতিটি গ্রিড সেলের মধ্যে অবস্থান করে — উদাহরণস্বরূপ, একটি ড্যাশবোর্ড কার্ডের জন্য গ্রিড এলাকার মধ্যে টেক্সটকে অনুভূমিক ও উল্লম্ব উভয়ভাবে সেন্টার-অ্যালাইন করা।
জেনারেট হওয়া CSS আউটপুট কপি-রেডি ফরম্যাটে grid-template-columns, grid-template-rows, gap, justify-items এবং align-items প্রপার্টিগুলো অন্তর্ভুক্ত করে। প্রিভিউ সংখ্যাযুক্ত সেল ব্যবহার করে যাতে আপনি সারি ও কলামের সংখ্যা আপনার উদ্দেশ্যপ্রণোদিত লেআউটের সাথে মেলে যাচাই করতে পারেন। CSS গ্রিড সমস্ত আধুনিক ব্রাউজারে সমর্থিত এবং 2D পেজ লেআউটের জন্য প্রস্তাবিত পদ্ধতি, যা float-ভিত্তিক লেআউট এবং জটিল ফ্লেক্সবক্স নেস্টিং-এর মতো পুরনো পদ্ধতিগুলো প্রতিস্থাপন করে।