HTML div এলিমেন্টগুলো পাশাপাশি রাখতে CSS ব্যবহার করে ৩টি উপায় নিচে দেওয়া হলো।
(প্রতিটি সেকশনে যেতে ক্লিক করুন)
- ফ্লোট মেথড
- ফ্লেক্সবক্স মেথড
- CSS গ্রিড মেথড
ফ্লোট মেথড
ফ্লোট মেথডে, আমরা নিচের HTML মার্কআপ ব্যবহার করব:
<div class="float-container"> <div class="float-child"> <div class="green">Float Column 1</div> </div> <div class="float-child"> <div class="blue">Float Column 2</div> </div> </div>.float-container শুধু প্যারেন্ট এলিমেন্ট যা দুটি .float-child এলিমেন্ট ধারণ করে।
Divগুলো পাশাপাশি পেতে, আমরা নিচের CSS রুলগুলো ব্যবহার করব:
.float-container { border: 3px solid #fff; padding: 20px; } .float-child { width: 50%; float: left; padding: 20px; border: 2px solid red; } ফলাফল কোডটি নিচের মতো দেখাবে:
আমি বর্ডার এবং প্যাডিং যোগ করেছি divগুলোতে যাতে আপনি সহজে বুঝতে পারেন কী ঘটছে। বাইরের চাঙা সাদা বর্ডারটি .float-container div, যাতে ২০px প্যাডিং আছে।
তারপর প্রতিটি .float-child এলিমেন্টে একটি পাতলা লাল বর্ডার এবং আরও কিছু প্যাডিং আছে। তারপর আসল রঙের ব্লকগুলো .float-child এলিমেন্টগুলোর চাইল্ড এলিমেন্ট। (কেন তো কিছুক্ষণে বুঝতে পারবেন।)
Divগুলো পাশাপাশি পজিশন করতে, আমরা float প্রপার্টি ব্যবহার করছি প্রতিটি .float-child এলিমেন্টকে বামে ফ্লোট করতে।
যেহেতু উভয়ই বামে ফ্লোট করছে, সেগুলো পাশাপাশি দেখাবে যদি উভয়ের জন্য পর্যাপ্ত স্পেস থাকে। সেগুলো ফিট করে কারণ দুটি .float-child div আছে, প্রতিটি ৫০% প্রস্থে।
এবং divগুলোর মাঝপথে স্পেস তৈরি করা হয়েছে প্রতিটি .float-child div-এ প্যাডিং যোগ করে, যাতে রঙের ব্লকগুলো থাকে।
প্রতিটি কলামকে একটি আউটার div-এ নেস্ট করে কলামগুলোর মাঝপথে স্পেস যোগ করুন
রঙের ব্লকগুলোর একটি আউটার div (.float-child) থাকা ضرুরি স্পেস যোগ করতে এবং উভয় ব্লক পাশাপাশি ফিট করতে।
তবে, যদি আমাদের শুধু .float-child divগুলো প্যাডিং ছাড়া থাকত, এবং বদলে প্রথম ব্লকে margin-right মান যোগ করে স্পেস যোগ করার চেষ্টা করতাম এইভাবে?
HTML:
<div class="float-container"> <div class="float-child green"> Float Column 1 </div> <div class="float-child blue"> Float Column 2 </div> </div> CSS:
.float-child.green { margin-right: 20px; }এই ক্ষেত্রে, উভয় .float-child এলিমেন্টই মোট প্রস্থের ৫০% নেবে। কিন্তু প্রথম গ্রিন এলিমেন্টের ২০px মার্জিনও থাকবে।
এর মানে উভয় ব্লকই ৫০% + ২০px + ৫০% প্রস্থ নেবে। এটি ১০০% প্রস্থের চেয়ে ২০px বেশি, অর্থাৎ উভয়কে পাশাপাশি রাখার জন্য পর্যাপ্ত জায়গা নেই।
দ্বিতীয় ব্লু ব্লক তখন প্রথম ব্লকের নিচে পরবর্তী সারিতে র্যাপ হয়ে যাবে, এবং সেখানে বামে ফ্লোট করবে:
আপনি প্রস্থগুলো ৪৮% বা ৫০% থেকে কম অন্য কোনো সংখ্যা করার চেষ্টা করতে পারেন যাতে সেগুলো ফিট করে। কিন্তু এটি সঠিক হবে না।
এই 이유로 আমি পছন্দ করি ব্লকগুলোকে একটি আউটার div-এ ৫০% প্রস্থ সেট করে র্যাপ করা, প্যাডিং দিয়ে divগুলোর মাঝপথে স্পেস যোগ করতে।
আজকাল, ফ্লোটের বদলে CSS-এ nieuwer পদ্ধতিগুলো ব্যবহার করে divগুলো পাশাপাশি রাখা সহজ।
চলুন এমন একটি পদ্ধতি দেখি: ফ্লেক্সবক্স মেথড!
ফ্লেক্সবক্স মেথড
ফ্লেক্সবক্সের সাথে, আমরা আমাদের দুটি div এলিমেন্ট অ্যালাইন করার একটি আরও אינটুইটিভ উপায় ব্যবহার করতে পারি।
HTML:
<div class="flex-container"> <div class="flex-child magenta"> Flex Column 1 </div> <div class="flex-child green"> Flex Column 2 </div> </div> CSS:
.flex-container { display: flex; } .flex-child { flex: 1; border: 2px solid yellow; } .flex-child:first-child { margin-right: 20px; } ফ্লেক্সবক্সে, আমরা প্যারেন্ট .flex-container এলিমেন্টে display: flex সেট করেছি। এটি ফ্লেক্সবক্স অন করে।
তারপর প্রতিটি .flex-child এলিমেন্টে, আমরা flex: 1 সেট করছি। এই নম্বরটি প্যারেন্ট ফ্লেক্স এলিমেন্টে প্রতিটি চাইল্ডের প্রস্থের সাথে অন्योंর একটি রেশিও এর মতো।
যেহেতু সেগুলো একই, উপলব্ধ স্পেস সমানভাবে ভাগ হবে। এবং যেহেতু দুটি চাইল্ড এলিমেন্ট আছে, সেগুলো প্রতিটি ৫০% নেবে।
ফলাফল কোডটি নিচের মতো দেখাবে:
মার্জিন ব্যবহার করে divগুলোর মাঝপথে স্পেস যোগ করুন, এবং এটি এখনও ফিট হবে!
লক্ষ্য করুন আমরা শুধু প্রথম .flex-child এলিমেন্টে margin-right: 20px যোগ করে স্পেস যোগ করেছি। যানবে, ফ্লেক্সবক্স পর্যাপ্ত ইন্টেলিজেন্ট যে বাকি উপলব্ধ প্রস্থ ভাগ করার সময় সেই একস্ট্রা ২০px কনসিডার করে।
এটি মানে আপনি সঠিক পিক্সেল ক্যালকুলেট না করেই মার্জিন দিয়ে স্পেস যোগ করতে পারেন। ফ্লেক্সবক্স কন্টেন্ট ফিট করে দেবে!
এটি একটি বড় কারণ যে আমি ফ্লেক্সবক্সকে পছন্দ করি।
তবে, যদি আপনার একাধিক এলিমেন্ট থাকে যা আপনি রেসপন্সিভ গ্রিডে লে আউট করতে চান, তবে আপনি সবসময় জানতে পারবেন না কোথায় এলিমেন্টগুলোর মাঝপথে স্পেস যোগ করতে হবে।
আমাদের কেসে, যদি আমরা মোবাইলের জন্য দুটি div একের নিচে এক স্ট্যাক করতে চাই, তবে আমাদের মোবাইল প্রস্থের জন্য সেই margin-right প্রপার্টি বাদ দিতে হবে।
অথবা আপনি প্রতিটি .flex-child এলিমেন্টের জন্য একটি অ্যাডিশনাল আউটার এলিমেন্ট প্লাস প্যাডিং যোগ করতে পারেন, ফ্লোট মেথডের মতো।
এটি ১০০% ইনটুইটিভ নয়, কিন্তু এটি কাজ করবে। আপনি যদি ফ্লেক্সবক্সে আরও জটিল রেসপন্সিভ লে আউট তৈরি করতে চান, তবে আপনাকে এই বিষয়টি মনে রাখতে হবে।
চলুন এখন divগুলো পাশাপাশি রাখার সবচেয়ে নতুন পদ্ধতি দেখি: CSS গ্রিড।
CSS গ্রিড মেথড
এখানে CSS গ্রিড ব্যবহার করে দুটি div পাশাপাশি রাখার উপায়:
HTML:
<div class="grid-container"> <div class="grid-child purple"> Grid Column 1 </div> <div class="grid-child green"> Grid Column 2 </div> </div>CSS:
.grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; }এবং কোডটি নিচের মতো দেখাবে:
গ্রিডের সাথে একটি বড় পরিবর্তন হলো আপনি প্রথমে নির্ধারণ করবেন গ্রিড টেমপ্লেটটি কেমন দেখাবে। অর্থাৎ আপনার লে আউটে কতগুলো কলাম এবং/অথবা সারি চান।
আমাদের কেসে, আমরা সমান প্রস্থের দুটি কলাম চাই। তাই প্যারেন্ট .grid-container এলিমেন্টে, display: grid দিয়ে গ্রিড অন করি। তারপর আমাদের লে আউটে কতগুলো কলাম চাই তা grid-template-columns প্রপার্টি দিয়ে যোগ করি।
আমরা সমান প্রস্থের দুটি কলাম চাই, তাই এটিকে 1fr 1fr সেট করি। এটি ব্রাউজারকে বলে দুই-কলাম লে আউট তৈরি করতে, এবং প্রতিটি কলাম 1fr (fr = fractional unit) স্পেস নেবে।
fr ইউনিটটি এক কলামের অন্য কলামের সাথে রেশিও, ফ্লেক্সবক্স মেথডে ব্যবহৃত flex: 1 রুলের মতো। কলামগুলোকে 1fr 1fr সেট করলে মানে প্রতিটি কলাম একই পরিমাণ স্পেস নেবে।
grid-gap প্রপার্টি ব্যবহার করে গ্রিড আইটেমগুলোর মাঝপথে স্পেস যোগ করুন
CSS গ্রিড ব্যবহার করার একটি বড় সুবিধা হলো আপনাকে গ্রিড আইটেমগুলোর মাঝপথে স্পেস যোগ করতে প্যাডিং বা মার্জিন ব্যবহার করতে হয় না।
আপনি grid-gap (নিউয়র ব্রাউজারে gap) ব্যবহার করে আপনার গ্রিড টেমপ্লেটে স্বয়ংক্রিয়ভাবে স্পেস যোগ করতে পারেন।
আমরা grid-gap-কে ২০px সেট করেছি, তাই ব্রাউজার জানবে সব আইটেমের মাঝপথে ২০px স্পেস যোগ করতে হবে, চাইতে সেগুলো পাশাপাশি থাকে নাকি স্ট্যাক্ড।
এবং আপনি লক্ষ্য করেছেন হবে যে গ্রিডের সব CSS প্রপার্টি প্যারেন্ট .grid-container এলিমেন্টে সেট করা হয়েছে। আমরা চাইল্ড .grid-child এলিমেন্টগুলোর জন্য কোনো CSS লিখতে হয়নি!
