() translation by (you can also view the original English article)
অন্যান্য এলিমেন্টের মত গ্রিড আইটেমেও সিএসএস পজিশন ব্যবহার করা সম্পূর্ণ সম্ভব। কিন্তু এখানে একটি বা দুটি সমস্যা আছে, তাই চলুন আমরা দেখে নেই কিভাবে এই ঝামেলাগুলো এড়াতে পারি।
সহজ আপেক্ষিক অবস্থান
আমরা এখন একটি সহজ গ্রিড দিয়ে শুরু করবো, যাতে তিন কলামে নয়টি আইটেম থাকবে। প্রতিটি কলাম 1fr প্রশস্ত হবে, কেবল তৃতীয় কলাম বাদে (minmax() এর কারণে) যা নুন্যতম 160px এর চেয়ে ছোট হবে না।
1 |
grid-template-columns: 1fr 1fr minmax(160px, 1fr); |
একটি আইটেমে আমরা বেশ কিছু রুলস যুক্ত করে, আমরা এটাকে আপেক্ষিক অবস্থানে রাখতে পারি:
1 |
.item-2 { |
2 |
position: relative; |
3 |
right: 100px; |
4 |
top: 30px; |
5 |
}
|
তাই আমরা যেমন আশা করেছি, item-2 আপেক্ষিকভাবে অবস্থান করবে, এরপর আমরা কিছু অফসেট প্রপার্টি সংজ্ঞায়িত করেছি (এ বিষয়টি fr ইউনিট ব্যবহার করে করার চেষ্টা করবেন না কারণ এতে কাজ হবে না)।
আপনি নিশ্চয়ই খেয়াল করেছেন, যদি উইন্ডো রিসাইজ করা হয়, তাহলে গ্রিড আইটেমও ধীরে ধীরে রিসাইজ হয়ে যায় ঠিক যেভাবে আগে ছিলো। কিন্তু, এখানেও এটি গ্রিডে তার জায়গা ধরে রেখে আগের মতই অবস্থান নেয়।
কিছুটা জটিল অ্যাবসলুট পজিশন
এখন কি ঘটবে যদি আমরা এই আইটেমটিকে অ্যাবসলুট পজিশনে রাখি? প্রথমত, এটি তার পূর্ববর্তী আইটেমের কাছাকাছি থাকতে চেষ্টা করবে যাতে একটি নির্দিষ্ট পজিশন অনুযায়ী মান ঘোষণা করা হয়েছে। যদি আপনি গ্রিড কনটেইনারে (উদাহরণস্বরূপ) position: relative; সেট না করেন, তাহলে গ্রিড আইটেমগুলো গ্রিড বাউণ্ডারি পার হয়ে অন্য কোন এইচটিএমএল এলিমেন্ট হিসেবে ধর্তব্য হবে।
ডেমোতে দেখতেই পাচ্ছেন আইটেমগুলো গ্রিড কন্টেইনারের উপর থেকে 100px এবং বামদিক থেকে 30px দূরত্বে অবস্থান করছে। এটি একেবারে স্থিতিশীল উপাদানগুলির মতই স্বাভাবিক ও কার্যকরভাবে ডকুমেন্টের প্রবাহ থেকে সরানো হয়েছে। গ্রিডে এটার স্লটটি item-3 দ্বারা পূর্ণ করা হয়েছে এবং অন্যান্য আইটেমগুলো অবশিষ্ট ফাঁকা জায়গা পূরণ করেছে।
নোট: যদি আমাদের গ্রিড কনটেইনারে প্যাডিং থাকে তবে অবস্থানটি বাইরের প্যাডিং সীমানাগুলির সাথে সম্পর্কিত হবে।
আপনি আরও দেখতে পাবেন যে, যখন এটা গ্রিডের অংশ হিসেবে ব্যবহার করা হবে তখন তাতে আর কোনও মাত্রা থাকবে না। এটা কনটেন্টের সাইজ অনুযায়ী সংকুচিত হয়ে যাবে। গ্রিডটি উপাদানটির আকারকে কোনও ভাবেই প্রভাবিত করবে না এবং উপাদানটিও গ্রিডের আকারকে কোনও উপায়েই প্রভাবিত করবে না।
গ্রিডের ভিতরে এ্যাবসল্যুট পজিশন
এছাড়াও আপনি সাধারণ অফসেটের পাশাপাশি গ্রিড-প্লেসমেন্ট প্রোপার্টি ব্যবহার করে একটি গ্রিড আইটেমের পজিশন ঠিক করতে পারেন। উদাহরণস্বরূপ, চলুন আমরা item-2 কে সম্পূর্ণভাবে grid-area: 3 / 2; এর উপর স্থাপন করি (অন্য কথায়, আমরা তৃতীয় সারি ও দ্বিতীয় কলামের লাইন থেকে শুরু করবো)।
এটা অদ্ভুত দেখাচ্ছে, কিন্তু আপনি নিশ্চয়ই দেখতে পাচ্ছেন, আইটেমটি এখনো গ্রিডের সাইজিং দ্বারা প্রভাবিত হয় নি এবং এখনো এটা স্বাভাবিক প্রবাহের বাইরেই আছে, যার ফলে এটার অবস্থান উপর দিক থেকে item-9 এর উপর এসে পতিত হয়েছে। যদিও এটা দেখতে অনেকটা গ্রিডের আইটেমের মতই মনে হয়।
নোট: z-index দিয়ে আপনি চাইলে আইটেমের স্বাভাবিক স্ট্যাকিং অর্ডার পরিবর্তন করতে পারেন।
আরও অগ্রসর হয়ে, আমরা আমাদের আইটেমে কিছু অফসেট যুক্ত করতে পারি (উদাহরনতঃ top: 50px;) আমাদের আইটেমে এই অফসেট প্রয়োগ করা হলেও এটা তার নিজস্ব কাল্পনিক গ্রিড প্লেসমেন্ট অনুযায়ী সত্যই থাকবে:
অন্তর্নিহিত গ্রিড সম্পর্কে একটি নোট
আগের টিউটোরিয়ালে আমরা দেখেছি কিভাবে গ্রিড প্রয়োজন হলে অন্তর্নিহিত ট্র্যাকসমূহ তৈরি করে; যদিও আমরা স্পষ্টভাবেই বেশ কিছু সংজ্ঞায়িত করে দিয়েছি। আমরা আমাদের আইটেমসমূহ এই ধরনের অন্তর্নিহিত ট্র্যাকে স্থাপন করতে পারি, কিন্তু গ্রিড স্বাভাবিক প্রবাহের বাইরে কখনই এই ধরনের ট্র্যাক সমূহ তৈরি করবে না।
নিচের ডেমোতে আমরা grid-area: 2 / 4; এ item-2 স্থাপন করেছি, কিন্তু এটা তখনই সম্ভব, যখন item-6 যা এরই মধ্যে প্রবাহে আছে তা গ্রিডকে আমাদের জন্য এক্সট্রা ট্র্যাকসমূহ তৈরি করতে সাহায্য করে।
পরিশিষ্ট
আপনার গ্রিডের ক্ষেত্রে পজিশনিংয়ের দরকার হবে কেন? প্রাথমিকভাবে এটা কিছুটা বাড়াবাড়ি মনে হতে পারে। কিন্তু আপনি যখন গ্রিড লেআউট থেকে বেরিয়ে এসে সরাসরি আমরা যেভাবে ওয়েবসাইটের লেআউট সাজিয়ে থাকি তা নিয়ে চিন্তা করবেন, তখন আমার মনে হয় আপনার কাছে গ্রিড লেআউটের পজিশনিং বেশ দরকারি মনে হবে।
সিএসএস গ্রিড লেআউটসিএসএস গ্রিড ব্যবহার করে একটি ভাঙ্গা গ্রিড লেআউট তৈরি করুন
সিএসএস গ্রিড লেআউটসিএসএস গ্রিড লেআউট: একটি দ্রুত শুরু করার নির্দেশিকা
