ম্যাক্রো লেআউট আপনার ইন্টারফেসের বৃহত্তর, পৃষ্ঠাব্যাপী বিন্যাস বর্ণনা করে।
যেকোনো লেআউট প্রয়োগ করার আগে, আপনার বিষয়বস্তুর প্রবাহ যৌক্তিক কিনা তা নিশ্চিত করে নেওয়া উচিত। ছোট স্ক্রিনগুলোতে এই এক-কলামের ডিফল্ট বিন্যাসটিই দেখা যাবে।
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
যখন আপনি এই স্বতন্ত্র পৃষ্ঠা-স্তরের উপাদানগুলিকে সাজান, তখন আপনি একটি ম্যাক্রো লেআউট ডিজাইন করছেন: যা আপনার পৃষ্ঠার একটি উচ্চ-স্তরের দৃশ্য। মিডিয়া কোয়েরি ব্যবহার করে, আপনি CSS-এ এমন নিয়ম সরবরাহ করতে পারেন যা বর্ণনা করে যে এই দৃশ্যটি বিভিন্ন স্ক্রিনের আকারের সাথে কীভাবে সামঞ্জস্য করবে।
গ্রিড
আপনার পেজে লেআউট প্রয়োগ করার জন্য CSS গ্রিড একটি চমৎকার টুল। আগের উদাহরণে, ধরুন আপনি চান যে স্ক্রিনে যথেষ্ট প্রস্থ উপলব্ধ হলে একটি দুই-কলামের লেআউট তৈরি হোক। ব্রাউজারটি যথেষ্ট প্রশস্ত হওয়ার সাথে সাথে এই দুই-কলামের লেআউটটি প্রয়োগ করতে, একটি নির্দিষ্ট ব্রেকপয়েন্টের উপরে গ্রিড স্টাইলগুলো সংজ্ঞায়িত করার জন্য একটি মিডিয়া কোয়েরি ব্যবহার করুন।
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
ফ্লেক্সবক্স
এই নির্দিষ্ট লেআউটটির জন্য আপনি ফ্লেক্সবক্সও ব্যবহার করতে পারেন। স্টাইলগুলো দেখতে এইরকম হবে:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
তবে, ফ্লেক্সবক্স সংস্করণে আরও বেশি CSS প্রয়োজন হয়। প্রতিটি কলামের জন্য একটি আলাদা নিয়ম থাকে, যা নির্ধারণ করে দেয় যে এটি কতটা জায়গা নেবে। গ্রিড উদাহরণে, সেই একই তথ্য ধারণকারী এলিমেন্টের জন্য একটিমাত্র নিয়মের মধ্যে আবদ্ধ থাকে।
আপনার কি মিডিয়া কোয়েরি প্রয়োজন?
আপনার সবসময় মিডিয়া কোয়েরি ব্যবহার করার প্রয়োজন নাও হতে পারে। কয়েকটি এলিমেন্টে পরিবর্তন আনার ক্ষেত্রে মিডিয়া কোয়েরি ঠিকঠাক কাজ করে, কিন্তু লেআউটটি যদি অনেক বেশি আপডেট করার প্রয়োজন হয়, তাহলে প্রচুর ব্রেকপয়েন্টের কারণে আপনার মিডিয়া কোয়েরিগুলো নিয়ন্ত্রণের বাইরে চলে যেতে পারে।
ধরুন আপনার কাছে কার্ডের উপাদান দিয়ে ভরা একটি পৃষ্ঠা আছে। কার্ডগুলো কখনোই 15em চেয়ে চওড়া নয়, এবং আপনি একটি লাইনে যতগুলো সম্ভব কার্ড রাখতে চান। আপনি 30em , 45em , এবং 60em এর মতো ব্রেকপয়েন্ট ব্যবহার করে মিডিয়া কোয়েরি লিখতে পারেন, কিন্তু তা বেশ ক্লান্তিকর এবং রক্ষণাবেক্ষণ করা কঠিন।
এর পরিবর্তে, আপনি এমন নিয়ম প্রয়োগ করতে পারেন যাতে কার্ডগুলো স্বয়ংক্রিয়ভাবে সঠিক পরিমাণ জায়গা দখল করে নেয়।
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
আপনি ফ্লেক্সবক্স ব্যবহার করেও একই ধরনের লেআউট তৈরি করতে পারেন। এক্ষেত্রে, শেষ সারিটি পূরণ করার জন্য যথেষ্ট কার্ড না থাকলে, বাকি কার্ডগুলো কলামে সারিবদ্ধ না হয়ে উপলব্ধ স্থান পূরণ করার জন্য প্রসারিত হবে। আপনি যদি সারি এবং কলাম সারিবদ্ধ করতে চান, তাহলে গ্রিড ব্যবহার করুন।
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
ফ্লেক্সবক্স বা গ্রিডে কিছু স্মার্ট নিয়ম প্রয়োগ করে, ন্যূনতম CSS ব্যবহার করে এবং কোনো মিডিয়া কোয়েরি ছাড়াই ডাইনামিক ম্যাক্রো লেআউট ডিজাইন করা সম্ভব। এতে আপনার কাজ কমে যায়—কারণ আপনি ব্রাউজারকে দিয়ে হিসাব-নিকাশের কাজটি করিয়ে নেন। মিডিয়া কোয়েরি ছাড়াই সাবলীল আধুনিক CSS লেআউটের কিছু উদাহরণ দেখতে 1linelayouts.com দেখুন।
আপনার বোধগম্যতা যাচাই করুন
ম্যাক্রো লেআউট সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন।
কোন বাক্যটি ম্যাক্রো লেআউটকে সবচেয়ে ভালোভাবে বর্ণনা করে?
ম্যাক্রো লেআউটগুলি কি বিভিন্ন স্ক্রিনের আকারের সাথে মানিয়ে নিতে সর্বদা মিডিয়া কোয়েরি ব্যবহার করে?
এখন যেহেতু আপনি পৃষ্ঠা-স্তরের ম্যাক্রো লেআউট সম্পর্কে কিছু ধারণা পেয়েছেন, এবার পৃষ্ঠার ভেতরের উপাদানগুলোর দিকে মনোযোগ দিন। এটাই হলো মাইক্রো লেআউটের জগৎ।