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

CSS গ্রিড লেআউটের পরিচিতি

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

কলাম ও রোর আকার এবং fr ইউনিটের ব্যবহার

গ্রিড লেআউট তৈরির মূল ভিত্তি হলো কলাম এবং রোর আকার নির্ধারণ করা। এই টুলে কলামসমূহ এবং রোসমূহ-এর সংখ্যা ১ থেকে ১২ পর্যন্ত নির্ধারণ করা যায়। প্রতিটি ট্র্যাকের (কলাম বা রো) নিজস্ব সাইজ বক্স রয়েছে, যেখানে যেকোনো বৈধ CSS গ্রিড মান ইনপুট দেওয়া সম্ভব।

গ্রিড ট্র্যাকে বহুল ব্যবহৃত কিছু মান নিচে আলোচনা করা হলো:

• 1fr (Fractional Unit): এটি গ্রিড কন্টেইনারের উপলব্ধ খালি জায়গার একটি অংশ নির্দেশ করে। উদাহরণস্বরূপ, তিনটি কলামের আকার যদি 1fr করে দেওয়া হয়, তবে তারা সমান তিন ভাগে বিভক্ত হবে।
• 200px: এটি একটি নির্দিষ্ট পিক্সেল মান, যা ট্র্যাকের আকারকে অপরিবর্তিত রাখে।
• auto: কন্টেন্টের ওপর ভিত্তি করে স্বয়ংক্রিয়ভাবে আকার নির্ধারণ করে।
• min-content: ট্র্যাকের ভেতরের কন্টেন্টের সর্বনিম্ন আকার অনুযায়ী ট্র্যাকের সাইজ নির্ধারণ করে।
• minmax(120px, 1fr): এটি একটি ফাংশন যা ট্র্যাকের সর্বনিম্ন আকার ১২০ পিক্সেল এবং সর্বোচ্চ আকার উপলব্ধ জায়গার ১ ফ্র্যাকশন নির্ধারণ করে।

যদি কোনো ট্র্যাকের আকারের জন্য not-a-grid-track-এর মতো কোনো অবৈধ মান ইনপুট দেওয়া হয়, তবে ইনপুট ফিল্ডটি অবৈধ হিসেবে চিহ্নিত হবে, কিন্তু CSS আউটপুটে সর্বশেষ বৈধ মানটিই বজায় থাকবে।

repeat() এবং gap প্রপার্টির ব্যবহার

কোডকে সংক্ষিপ্ত ও পরিচ্ছন্ন রাখার জন্য CSS গ্রিডে কিছু বিশেষ নিয়ম রয়েছে, যা এই টুলটি স্বয়ংক্রিয়ভাবে পরিচালনা করে:

repeat() ফাংশন

যখন একাধিক কলাম বা রোর আকার একই থাকে, তখন আউটপুট CSS-এ সেগুলোকে আলাদাভাবে না লিখে repeat() ফাংশনের মাধ্যমে সংকুচিত করা হয়। যেমন, তিনটি কলামের আকারই যদি 1fr হয়, তবে কোডে তা repeat(3, 1fr) হিসেবে প্রদর্শিত হবে।

গ্যাপ প্রপার্টি

টুলটিতে কলাম গ্যাপ এবং রো গ্যাপ আলাদাভাবে ০ থেকে 48px পর্যন্ত সেট করা যায়। কলাম গ্যাপ এবং রো গ্যাপের মান ভিন্ন হলে CSS-এ column-gap এবং row-gap আলাদাভাবে তৈরি হয়। তবে এই দুটি মান যখন মিলে যায়, তখন তারা স্বয়ংক্রিয়ভাবে সংকুচিত হয়ে একটি একক gap প্রপার্টিতে রূপান্তরিত হয়।

আইটেম স্থাপন এবং ওভারল্যাপিং নিয়ম

গ্রিডের ভেতরের সেলগুলোর ওপর মাউস দিয়ে ড্র্যাগ করে একটি আয়তক্ষেত্রাকার এলাকা চিহ্নিত করার মাধ্যমে আইটেম স্থাপন করা যায়। মাউস ছেড়ে দিলে সেটি একটি প্লেসড চাইল্ড আইটেমে পরিণত হয়, যা নির্দিষ্ট কলাম ও রো জুড়ে বিস্তৃত থাকে।

আইটেম স্থাপনের ক্ষেত্রে নিম্নলিখিত নিয়মগুলো প্রযোজ্য:

• টুলটিতে সর্বোচ্চ ১৬টি আইটেম স্থাপন করা সম্ভব।
• প্রতিটি আঁকা আইটেমের জন্য CSS-এ নিজস্ব grid-column এবং grid-row রুল তৈরি হয় এবং HTML-এ একটি মানানসই div তৈরি হয়।
• আইটেমগুলো একে অপরের ওপর ওভারল্যাপ বা অতিস্থাপন করতে পারে। যে আইটেমটি পরে আঁকা হবে, সেটি লেআউটের ওপরের স্তরে অবস্থান করবে।
• কোনো আইটেম মুছে ফেলার জন্য তার ওপরের "×" চিহ্নে ক্লিক করতে হবে।
• "সব আইটেম মুছুন" অপশনটি ব্যবহার করলে সমস্ত আইটেম মুছে গিয়ে একটি খালি HTML কন্টেইনার তৈরি হবে এবং আইটেমের সংখ্যা ০ হয়ে যাবে।
• "আইটেম যোগ করুন" অপশনটি ব্যবহার করে সরাসরি একটি HTML আইটেম তৈরি করা যায়।

সাধারণ লেআউট প্রিসেটসমূহ

দ্রুত লেআউট প্রোটোটাইপ করার জন্য এই টুলে কিছু সাধারণ লেআউট প্রিসেট দেওয়া রয়েছে: ১. সাইডবার: একটি মূল কন্টেন্ট এরিয়া এবং পাশে একটি সাইডবার লেআউট তৈরি করে। ২. হেডার ও ফুটার: উপরে হেডার, মাঝে কন্টেন্ট এবং নিচে ফুটারসহ লেআউট তৈরি করে। ৩. গ্যালারি: এই প্রিসেটটি নির্বাচন করলে স্বয়ংক্রিয়ভাবে ৩টি কলাম, ২টি রো এবং ৩টি আইটেম তৈরি হয়। ৪. ড্যাশবোর্ড: একটি জটিল গ্রিড লেআউট তৈরি করে যা ড্যাশবোর্ড ইন্টারফেসের জন্য উপযোগী।

ডেটা প্রসেসিং এবং গোপনীয়তা

এই টুলটি ব্যবহারের ক্ষেত্রে ব্যবহারকারীর গোপনীয়তা সম্পূর্ণ বজায় থাকে। আপনার গ্রিড সরাসরি আপনার ব্রাউজারে তৈরি হয়। আপনার কোনো সেটিংস BroBroGo-তে আপলোড করা হয় না, ফলে সমস্ত ডেটা প্রসেসিং স্থানীয়ভাবে আপনার ডিভাইসেই সম্পন্ন হয়।

---

সাধারণ জিজ্ঞাসা (FAQ)

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

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

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

প্রশ্ন: এই টুলে সর্বোচ্চ কয়টি আইটেম যোগ করা যায়?
উত্তর: এই টুলটি ব্যবহার করে গ্রিড লেআউটে সর্বোচ্চ ১৬টি আইটেম স্থাপন বা যোগ করা সম্ভব।