এখন পর্যন্ত আমাদের সিএসএস গ্রিড টিউটোরিয়ালে মূলত সুস্পষ্ট ও নিখুঁত মানের উপর জোর দেয়া হয়েছে-বিভিন্ন ট্র্যাকের বা সারির মাপ যা সাধারণত আমরা সুস্পষ্ট ও নিখুঁত ভাবে সংজ্ঞায়িত করেছি। আমরা ইতিমধ্যেই 200px উচ্চতার সারি ব্যবহার করেছি অথবা এমন সব কলাম যা সম্ভবত 1fr পরিমাণ প্রশস্ত, এবং আমরা খুব পরিষ্কারভাবে উল্লেখ করে দিয়েছি যে আমরা মোট কতটি কলাম চাই ইত্যাদি। কিন্তু আপনি যদি না জানেন যে আপনি আসলে ঠিক কয়টি কলাম চান, অথবা এটি নির্দিষ্টভাবে উল্লেখ করতে না চান তখন কি করবেন? ঠিক এই জায়গাতেই আপনি অন্তর্নিহিত মান নিয়ে কাজ করতে পারেন। চলুন, দেখা যাক কিভাবে করবেন।

স্টার্টার গ্রিড

এখানে একটি মৌলিক grid দেয়া হল যা আপনি অনুসরণ করতে পারেন। এতে আছে একটি গ্রিড কন্টেইনার এবং ৯ টি গ্রিড আইটেম।কলামের দৈর্ঘ্য এবং পরিমাণ এখানে সংজ্ঞায়িত করা হয়নি, তাই প্রতিটি আইটেম এখানে থাকা সম্পূর্ণ দৈর্ঘ্যর সর্বাধিক অংশ ব্যবহার করবে।

শুধুমাত্র একটি কলাম সংজ্ঞায়িত করুন

মনে করুন, আমরা বামদিকে শুধুমাত্র একটি কলাম চাই, এবং আমরা চাই এই কলামের প্রস্থে ৩০০ পিক্সেল পরিমাণ প্রশস্ত হউক। আমরা এটা আমাদের গ্রিড কন্টেইনারে grid-template-columns: 300px; যুক্ত করার মাধ্যমে সংজ্ঞায়িত করতে পারি। কিন্তু আমরা স্পষ্টভাবে সংজ্ঞায়িত না করে আর কোন কলাম ব্যবহার করব না।

তাহলে, গ্রিডে অবস্থিত কোনও আইটেম নির্দিষ্টভাবে সংজ্ঞায়িত করতে হলে উদাহরণস্বরূপ প্রথম সারির দ্বিতীয় কলাম এর আইটেমের জন্য,  আমরা নিচের কোড ব্যবহার করবোঃ

.item-3 {
  grid-column: 3;
  grid-row: 1;
}

এর ফলে আমরা সংজ্ঞায়িত গ্রিডের বাইরেও অতিরিক্ত কলাম তৈরি করতে পারব কারণ CSS Grid কোনও কনটেইনারের ভিতর থাকা সম্পূর্ণ জায়গাটিই ব্যবহার করে থাকে। এটি একটি অটো-প্লেসমেন্ট অ্যালগরিদম যা স্বয়ংক্রিয়ভাবেই জায়গা ঠিক করে নেয়।

এটা সত্যিই অসাধারণ, যে যদি কখনো আমাদের অতিরিক্ত কলামের প্রয়োজন হয়, তাহলে কোনও গ্রিড নিজে নিজেই কলামের দৈর্ঘ্য অনুমান করে নিবে। এ জন্য আমাদেরকে প্রতিটি কলাম আলাদা আলাদাভাবে সংজ্ঞায়িত করতে হবে না। কিন্তু যদি আমরা কখনো অদৃশ্য কোন ট্র্যাক চাই, যার মধ্যে কতকগুলোর প্রায় সুনির্দিষ্ট  দৈর্ঘ্য থাকবে, তখন কি হবে? ঠিক এখানেই grid-auto-columns  আপনার কাজে আসবে।

Grid-auto-columns সঙ্গে পরিচিত হোন

আমরা যদি প্রথম কলাম ছাড়া বাকি কলামগুলোর দৈর্ঘ্য ১০০ পিক্সেল করতে চাই তবে এটা সুস্পষ্টভাবে উল্লেখ করে দিতে পারিঃ

grid-auto-columns: 100px;

এর ফলে, দুই দিকের কলামগুলোই সুন্দরভাবে দেখাবে। এখানে আমরা যা করেছি, তা হচ্ছে, আমরা চাই, আমাদের প্রথম কলামটি 1fr হউক। মানে, সম্পূর্ণ দৈর্ঘ্য যাই হোক না কেন, তা থেকে অর্ধেক হবে, এখানে auto এর প্রভাবও একইরকম। এই কলামের পর অন্যান্য কলামগুলো সুস্পষ্টরূপে 100px প্রস্থ হবে।

grid-template-columns: 1fr;
grid-auto-columns: 100px;

ফলে আমরা  নিচের মত কলামসমূহ পাবোঃ

এবং যদি আমরা বলি যে, ৩ নং আইটেমটি এক নম্বর সারির পাঁচ নম্বর কলামে অবস্থান করবে। তাহলে গ্রিডটি স্বয়ংক্রিয়ভাবেই ঠিক করে নেবে যে, এই কাজটি করতে প্রত্যেকটি কলামের ঠিক কি পরিমাণ দৈর্ঘ্যের প্রয়োজন হবে।

আমরা এখানে পিক্সেলের মানসমূহ নির্দিষ্ট করবো না, কিন্তু fraction units, em units, এমনকি minmax() রোটেশনও ব্যবহার করতে পারি, যা আমরা আগের টিউটোরিয়ালেই আলোচনা করেছি।

Grid-auto-rows এর কথা ভুলে যাবেন না

এটা বলার বাকি নেই যে, grid-auto-rows সারির জন্য তাই করবে যা grid-auto-columns কলামের জন্য করে থাকে। এখানে দেখানো হয়েছে কিভাবে প্রথম দুটি সারি ছাড়া বাকি সব সারি 200px উচ্চতা বিশিষ্ট করবেন।

পরিশেষ

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

আরোও পড়ুন

• Implicit Track Sizing spec