CSS গ্রিড জেনারেটর

সেলগুলোর ওপর ক্লিক করে ড্র্যাগ করে একটি আয়তক্ষেত্র চিহ্নিত করুন — মাউস ছেড়ে দিলে এটি সেই কলাম এবং রো জুড়ে একটি প্লেসড চাইল্ড (placed child) হয়ে যাবে। আপনার আঁকা প্রতিটি আইটেম CSS-এ নিজস্ব grid-column এবং grid-row রুল এবং HTML-এ একটি মানানসই div পাবে। আইটেমগুলো একে অপরের ওপর ওভারল্যাপ করতে পারে, এবং পরে আঁকা আইটেমটি উপরে থাকবে; কোনো আইটেম সরাতে তার ওপরের × চিহ্নটি ব্যবহার করুন।

হ্যাঁ। প্রতিটি ট্র্যাকের নিজস্ব সাইজ বক্স রয়েছে এবং আপনি সেখানে যেকোনো গ্রিড মান লিখতে পারেন — 1fr, 200px, auto, min-content বা minmax(120px, 1fr)। একই আকারের ট্র্যাকগুলোকে repeat() দিয়ে সংকুচিত করা হয় যাতে কোড সংক্ষিপ্ত থাকে। কলাম গ্যাপ এবং রো গ্যাপ আলাদাভাবে সেট করা হয় এবং তারা মিলে গেলে একটি একক গ্যাপে পরিণত হয়।

CSS এবং HTML কোড পাশাপাশি কপি করুন। HTML আপনাকে প্রতি আইটেমের জন্য একটি করে div সহ কন্টেইনার দেবে, এবং CSS গ্রিড সংজ্ঞায়িত করবে ও প্রতিটি আইটেমের অবস্থান নির্ধারণ করবে। দুটিই আপনার প্রজেক্টে পেস্ট করুন এবং আপনি এখানে যেভাবে লেআউটটি এঁকেছেন ঠিক সেভাবেই পেয়ে যাবেন।