আসুন সাইটের গ্রিড ডিজাইনটি একবার দেখুন এবং স্বতন্ত্র উপাদানগুলি ভেঙে দিন। আসুন ভাসা কেন এত কার্যকর তা আবিষ্কার করুন, পাশাপাশি তিনটি স্ট্রিম এবং একটি সাইট ফুটার থেকে প্রথম ওয়েব গ্রিড তৈরির জন্য জনপ্রিয় কৌশল।
কোনও সাইটের গ্রিড নির্মাণ অধ্যয়ন করতে আপনার "প্রবাহ" কী তা বুঝতে হবে। ফ্লো হ'ল সাইটের একের পর এক উপাদান। উদাহরণস্বরূপ, এটি ডিভ উপাদান হতে পারে যা ডিফল্টরূপে একের পর এক চলে। তবে প্রবাহটি পুনরায় সাজানো যায় এবং ব্লক উপাদানগুলির অবস্থান পরিবর্তন করা যায়।
প্রবাহ নিয়ন্ত্রণ করতে, আমরা ভাসা সম্পত্তি ব্যবহার করি, যা ব্লকটি বাম বা ডানদিকে রাখতে পারে। সিএসএস ফাইলে লেখার জন্য এটি যথেষ্ট:
"শ্রেণি বা ব্লকের নাম" {ভাসা: ডান / বাম; }
ফ্লোটের একমাত্র অপূর্ণতা হ'ল অন্যটির উপরে একটি ব্লক "ওভারল্যাপ" করার ক্ষমতা।
দৌড়াতে এড়াতে, আমরা পরিষ্কার ব্যবহার করি: উভয়ই - এই সম্পত্তিটি ব্লকের চারপাশে প্রবাহ স্থাপন করবে। আমরা প্রস্থ এবং উচ্চতা সর্বাধিক এবং সর্বনিম্ন হিসাবে সেট করেছি, যাতে মানটি সামগ্রীর আকার (পাঠ্য, চিত্র) অনুসারে গঠিত হয়। মার্জিন - অটোতে মান সেট করুন যাতে ব্লকের অবস্থানের উপর নির্ভর করে বাহ্যিক মার্জিনগুলি স্বয়ংক্রিয়ভাবে গঠিত হয়।
যেহেতু ভাসমান দুটি দিকগুলিতে ব্লক স্থাপন করতে পারে, তাই সাইটটি স্ট্রিম - বাম এবং ডানদিকে বিভক্ত করার প্রথাগত। প্রোগ্রামারকে যদি কেবল দুটি স্ট্রিমের প্রয়োজন হয়, তবে সে বাম এবং ডান ভাসা ছেড়ে দেয়, তবে যদি আরও দুটি থাকে তবে সে মার্জিন ব্যবহার করে মার্জিনগুলিকে সামঞ্জস্য করে। এটি কীভাবে ঘটে:
.column1 {ভাসা: বাম; প্রস্থ: 65px; ন্যূনতম উচ্চতা: 50px; মার্জিন-ডান: 9px; কেন্দ্র বাক্স থেকে // 9 পিএক্স}
2 স্ট্রিম:
.column2 {ভাসা: বাম; // বাম ব্লক, তবে "ওভারল্যাপিং" ছাড়াই, যেহেতু আমরা মার্জিন প্রস্থ প্রয়োগ করেছি: 80px; ন্যূনতম উচ্চতা: 50px; }
3 স্ট্রিম:
.column3 {ভাসা: ডান; প্রস্থ: 65px; ন্যূনতম উচ্চতা: 50px; }
পাদচরণ (.ফুটার) এর সাথে সম্পর্কিত:
.ফুটার {পরিষ্কার: উভয়; // উভয় পক্ষের চারপাশে মোড়ানো}
এইভাবে আমরা তিনটি স্ট্রিম সমন্বয়ে ভাসমান ব্যবহার করে সাইটের জন্য গ্রিড তৈরি করেছি।
