সিএসএস গ্রিড লেআউটঃ ফ্লুইড কলাম এবং বেটার গাটারস

এই টিউটোরিয়ালে আমরা আগের টিউটোরিয়ালের গ্রিডটি ব্যবহার করে গ্রিডের অন্যান্য ব্যবহার সম্পর্কে জানবো। আমরা যেভাবে আমাদের গাটার বা ফাঁকা জায়গাসমূহ সংজ্ঞায়িত করে থাকি তা আরও উন্নত করবো, ফ্লেক্সিবল লেআউট এবং fr ইউনিট  সম্পর্কে জানবো, এবং repeat() ফাংশনের সাথে পরিচিত হবো।

ফ্লেক্সিবল ইউনিটসমূহ

গ্রিডের মূল উদ্দেশ্য হচ্ছে ওয়েব লেআউট সঠিকভাবে নিয়ন্ত্রণ করা, তাই চলুনআরও অগ্রসর হওয়ার আগে আমাদের স্ট্যাটিক গ্রিডকে ফ্লুইড গ্রিডে রুপান্তর করি। মনে করে দেখুন, আমরা আমাদের গ্রিডে স্ট্যাটিক পিক্সেল ব্যবহার করেছি:

1

grid-template-columns: 150px 20px 150px 20px 150px;

2

grid-template-rows: auto 20px auto 20px auto;

এখানে ems অথবা rems এর মত অন্যান্য ইউনিট ব্যবহার করাও কিন্তু সম্ভব। এমনকি vh এবং vmin এর মত বিরল ইউনিট সমূহও ব্যবহার করা যায়।

এই ক্ষেত্রে আমরা আমাদের পিক্সেল ইউনিটকে শতাংশে রুপান্তর করবো।    কলাম এবং গাটারের প্রশস্ততা সংজ্ঞায়িত করার সময় আমরা নিশ্চিত হবো যাতে সবগুলোর মান একত্রে ১০০% হয়।

1

grid-template-columns: 30% 5% 30% 5% 30%;

শূন্যস্থানের কথা মনে রাখবেন

গাটারের প্রশস্ততা নির্ণয় করতে আরও একটি কার্যকর উপায় আছে এবং এটা করতে একটি বিশেষ প্রোপার্টি প্রয়োজন হবে। আমরা grid-column-gap এবং grid-row-gap প্রোপার্টি দুটি ব্যবহার করতে পারি, অথবা এর পরিবর্তে শর্ট-হ্যান্ড প্রোপার্টি grid-gap ব্যবহার করা যায়।

এই দুটি ব্যবহার করার মানে হচ্ছে আমাদেরকে গাটার ঠিক করতে আলাদা করে আর গ্রিড ট্র্যাক অন্তর্ভুক্ত করতে হবে না, কেবল কলাম এবং সারির প্রশস্ততা ঠিক করলেই চলবে, আমাদের ক্ষেত্রে তিন কলামের প্রতিটিতে হবে:

1

  grid-template-columns: 33.33% 33.33% 33.33%;

2

  grid-template-rows: auto auto auto;

হুম, এটা কিছুটা হিজিবিজি দেখাচ্ছে, তবে এভাবে সাজানো ভালোভাবেই কাজ করবে। লক্ষ্য করে দেখুন, আমাদের কলামের প্রশস্ততা এখন ১০০% এরও বেশি; আমাদের গাটারগুলো এগুলো থেকে স্বয়ংক্রিয়ভাবে বিয়োগ হয়ে যাবে।

পুনরাবৃত্তি

এবার repeat() ফাংশন ব্যবহার করে, আরও পরিচ্ছন্ন উপায়ে লেখা যাক:

1

grid-template-columns: repeat(3, 33.33%);

এটা দিয়ে “33.33% কে তিনবার পুনরাবৃত্তি করা হয়” ফলে আমরা তিনটি কলাম পাবো। এমনকি আপনার grid-template-rows ডিক্লেরেশনেরও প্রয়োজন নেই কারন auto এর স্বয়ংক্রিয় মান এক্ষেত্রে ডিফল্টরূপে বসে যাবে। এখন আমাদেরকে ঠিক করতে হবে যে, আমরা আমাদের গাটারটি কি পরিমান বড় করতে চাই:

1

  grid-template-columns: repeat(3, 33.33%);

2

  grid-gap: 20px;

grid-gap এ ফিক্সড এবং ফ্লেক্সিবল ইউনিট ব্যবহার করা যায়, এর মানে হচ্ছে আমরা জটিল কোনও হিসাব নিকাশে না গিয়েই ফ্লুইড কলাম এবং ফিক্সড গাটার একত্রিত করে নিতে পারি।

grid-column এবং grid-row এর মান রিসেট করা 

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

fr ইউনিট 

চুড়ান্তভাবে আমরা অবশেষে একটি সাধারণ গ্রিড তৈরি করতে পারবো; এখন আমরা fr, অথবা fraction ইউনিটের সাথে পরিচিত হবো।  একটি একক fr ইউনিট দিয়ে বোঝানো হয় “একটি সম্পূর্ণ পরিমাপকে যত ভাগে ভাগ করা হোক না কেন তার একটি অংশ”। যেমন, আমরা আমাদের কলাম নিচের কোড ব্যবহার করে ঘোষণা করতে পারি:

1

  grid-template-columns: 1fr 1fr 1fr;

এখানে মোট তিনটি fr ইউনিট আছে, তাই প্রত্যেক কলামের দৈর্ঘ্য হবে এক তৃতীয়াংশ। এখানে আরেকটি উদাহরন:

1

  grid-template-columns: 2fr 1fr 1fr

এখন এখানে মোট চারটি fr ইউনিট আছে, তাই প্রথম কলাম, সম্পূর্ণ জায়গার অর্ধেক নিবে, এবং বাকি দুই কলাম চার ভাগের এক ভাগ করে জায়গা নিবে।

এই ইউনিটগুলো কিন্তু আসলেই শক্তিশালী, বিশেষ করে যখন অন্য পরিমাপের এককের সাথে ব্যবহার করা হয়:

1

grid-template-columns: 300px 1fr 3fr 20%;

এখানে আমরা মোট চারটি কলাম ঘোষণা করেছি: 

• প্রথমটি নির্দিষ্ট 300px পরিমান প্রশস্ত
• শেষেরটি হচ্ছে সম্পূর্ণ গ্রিড কন্টেইনার এলিমেন্টের প্রশস্ততার ২০%।
• এবং দ্বিতীয় কলামটি হচ্ছে fr ইউনিটের পরিমাপ যা বাকি জায়গা দখল করবে।
• এবং তৃতীয়টি তিন টুকরা হয়ে যাবে।

দেখে মনে হচ্ছে এটা বেশ নিখুঁতভাবে স্বয়ংক্রিয় অবস্থান শনাক্ত করার মাধ্যমে আমাদের নয়টি আইটেম তাদের মাঝে থাকা শূন্যস্থান পূর্ণ করতে সমর্থ হবে:

এবার মূল গ্রিডে ফিরে গিয়ে হিজিবিজি ও ভুল 33.33% মান 1fr দিয়ে বদলে দেয়া যাক:

1

  grid-template-columns: repeat(3, 1fr);

সমাপ্ত হওয়া পেন:

পরিসমাপ্তি

পরিশেষে বলা যায়:

1. গ্রিডে ফিক্সড ইউনিটের সঙ্গে সমন্বয় করে ফ্লেক্সিবল ইউনিট ব্যবহার করা যায়।
2. grid-template এর ভেতরেই আমাদেরকে গাটার ঘোষণা করতে হবে না। এর পরিবর্তে আমরা grid-gap প্রোপার্টি ব্যবহার করতে পারি।
3. grid-gap এর মানে হচ্ছে গ্রিড আইটেমের অবস্থান ঠিক করার জন্য কোনও বাঁধা ধরা নিয়ম নেই- এই বিষয়টি আমরা স্বয়ংক্রিয় অবস্থানের উপর ছেড়ে দিতে পারি।
4. repeat() ফাংশন আমাদের সময় বাঁচাবে এবং আমাদের স্টাইলশিটকে কাজের উপযোগী রাখবে।
5. fr, অথবা fraction ইউনিট গ্রিড টেম্পলেট বর্ণনা করার সবচেয়ে শক্তিশালী উপায়।

এই দুটি টিউটোরিয়ালেই আমরা অনেক দীর্ঘ পথ পাড়ি দিয়ে এসেছি, কিন্তু আপনি এরই মধ্যে একটি পরিচ্ছন্ন এবং সংক্ষিপ্ত গ্রিড পেয়ে গেলেন! পরবর্তী টিউটোরিয়ালে আমরা গ্রিড এরিয়া সম্পর্কে জানবো, এবং বেশ কিছু span কীওয়ার্ড এবং প্র্যাক্টিকাল লেআউট দেখবো।

দরকারী রিসোর্সসমূহ 

• W3C থেকে <fraction> type and fr unit
• এছারাও, ফলো করুন @rachelandrew