মাইক্রো লেআউট

যখন আমরা লেআউটের কথা ভাবি, তখন প্রায়শই পৃষ্ঠা-স্তরের নকশার কথা চিন্তা করি। কিন্তু পৃষ্ঠার ভেতরের ছোট ছোট উপাদানগুলোরও নিজস্ব স্বয়ংসম্পূর্ণ লেআউট থাকতে পারে।

আদর্শগতভাবে, এই কম্পোনেন্ট-স্তরের লেআউটগুলো পৃষ্ঠায় তাদের অবস্থান নির্বিশেষে স্বয়ংক্রিয়ভাবে নিজেদেরকে সামঞ্জস্য করে নেবে। এমন পরিস্থিতিও হতে পারে যেখানে আপনি জানেন না যে একটি কম্পোনেন্ট মূল কন্টেন্ট কলামে, সাইডবারে, নাকি উভয় স্থানেই স্থাপন করা হবে। একটি কম্পোনেন্ট শেষ পর্যন্ত কোথায় থাকবে তা নিশ্চিতভাবে না জেনে, আপনাকে নিশ্চিত করতে হবে যে কম্পোনেন্টটি তার কন্টেইনারের সাথে নিজেকে মানিয়ে নিতে পারে।

দ্রষ্টব্য: কন্টেইনার কোয়েরি ব্যবহার করে এমন কম্পোনেন্ট তৈরি করা সহজ হতে পারে যা তাদের কন্টেইনারের সাথে খাপ খাইয়ে নিতে পারে।

গ্রিড

CSS গ্রিড শুধু পেজ-লেভেল লেআউটের জন্যই নয়, এর ভেতরের কম্পোনেন্টগুলোর জন্যও এটি ভালোভাবে কাজ করে।

এই উদাহরণে, ::before এবং ::after সিউডো-এলিমেন্টগুলো একটি হেডিং-এর দুই পাশে আলংকারিক রেখা তৈরি করে। হেডিংটি নিজেই একটি গ্রিড কন্টেইনার। প্রতিটি এলিমেন্ট এমনভাবে সাজানো হয়েছে যাতে রেখাগুলো সর্বদা উপলব্ধ স্থানটি পূরণ করে।

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1em;
}
h1::before,
h1::after {
  content: "";
  border-top: 0.1em double black;
  align-self: center;
}

ফায়ারফক্স এবং ক্রোমের মতো ডেস্কটপ ব্রাউজারগুলিতে ডেভেলপার টুল রয়েছে, যা আপনার ডিজাইনের উপর গ্রিড লাইন এবং বিভিন্ন এলাকা দেখিয়ে দিতে পারে।

ক্রোম ডেভটুলস-এ কীভাবে গ্রিড লেআউট পরিদর্শন করতে হয় তা জানুন।

ফ্লেক্সবক্স

নাম শুনেই বোঝা যায়, আপনি আপনার কম্পোনেন্টগুলোকে নমনীয় করতে ফ্লেক্সবক্স ব্যবহার করতে পারেন। আপনার কম্পোনেন্টের কোন উপাদানগুলোর সর্বনিম্ন বা সর্বোচ্চ আকার থাকবে তা আপনি নির্ধারণ করে দিতে পারেন এবং অন্যান্য উপাদানগুলোকে সেই অনুযায়ী মানিয়ে নিতে দিতে পারেন।

এই উদাহরণে, ছবিটি উপলব্ধ স্থানের এক-চতুর্থাংশ এবং লেখাটি বাকি তিন-চতুর্থাংশ জায়গা নেয়। কিন্তু ছবিটির আকার কখনোই ২০০ পিক্সেলের বেশি হয় না।

.media {
  display: flex;
  align-items: center;
  gap: 1em;
}
.media-illustration {
  flex: 1;
  max-inline-size: 200px;
}
.media-content {
  flex: 3;
}

ফায়ারফক্স এবং ক্রোমের ডেভেলপার টুলগুলো আপনাকে আপনার ফ্লেক্সবক্স কম্পোনেন্টগুলোর আকৃতি কল্পনা করতে সাহায্য করতে পারে।

ক্রোম ডেভটুলস-এ কীভাবে ফ্লেক্সবক্স লেআউট পরিদর্শন করতে হয় তা শিখুন।

কন্টেইনার কোয়েরি

ফ্লেক্সবক্স আপনাকে সরাসরি কন্টেন্ট থেকে ডিজাইন করার সুযোগ দেয়। আপনি আপনার এলিমেন্টগুলোর প্যারামিটার (যেমন সেগুলো কতটা সরু বা চওড়া হবে) নির্দিষ্ট করে দিতে পারেন এবং চূড়ান্ত রূপটি ব্রাউজারের ওপর ছেড়ে দিতে পারেন।

কিন্তু কম্পোনেন্টটির নিজেরই তার প্রেক্ষাপট সম্পর্কে কোনো ধারণা থাকে না। এটি জানে না যে এটিকে মূল কন্টেন্টে ব্যবহার করা হচ্ছে নাকি সাইডবারে। এই কারণে কম্পোনেন্ট লেআউট পেজ লেআউটের চেয়ে বেশি জটিল হতে পারে। প্রাসঙ্গিকভাবে প্রাসঙ্গিক স্টাইল প্রয়োগ করতে হলে, আপনার কম্পোনেন্টগুলোকে শুধু তাদের ভেতরের ভিউপোর্টের আকার জানলেই চলবে না, আরও বেশি কিছু জানতে হবে।

পেজ লেআউটের ক্ষেত্রে, আপনি কন্টেইনারের প্রস্থ জানতে পারেন, কারণ কন্টেইনারটিই হলো ব্রাউজার ভিউপোর্ট; অন্যদিকে মিডিয়া কোয়েরি পেজ-স্তরের কন্টেইনারের মাত্রাগুলো প্রকাশ করে।

যেকোনো কন্টেইনারের মাত্রা জানাতে, কন্টেইনার কোয়েরি ব্যবহার করুন।

শুরুতে, কোন উপাদানগুলো ধারক হিসেবে কাজ করবে তা নির্ধারণ করুন।

main,
aside {
  container-type: inline-size;
}

এর মানে হলো, আপনি ইনলাইন ডাইমেনশনটি কোয়েরি করতে চান। ইংরেজি ভাষার ডকুমেন্টের ক্ষেত্রে, এটি হলো হরাইজন্টাল অ্যাক্সিস। আপনি কন্টেইনারের প্রস্থের ওপর ভিত্তি করে স্টাইল পরিবর্তন করবেন।

যদি কোনো কম্পোনেন্ট ওই কন্টেইনারগুলোর কোনো একটির ভেতরে থাকে, তাহলে আপনি মিডিয়া কোয়েরি প্রয়োগ করার মতোই স্টাইল প্রয়োগ করতে পারেন।

.media-illustration {
  max-width: 200px;
  margin: auto;
}

@container (min-width: 25em) {
  .media {
    display: flex;
    align-items: center;
    gap: 1em;
  }

  .media-illustration {
    flex: 1;
  }

  .media-content {
    flex: 3;
  }
}

যদি কোনো মিডিয়া অবজেক্ট 25em এর চেয়ে সরু কোনো কন্টেইনারের ভেতরে থাকে, তাহলে ফ্লেক্সবক্স স্টাইলগুলো প্রয়োগ হয় না। ছবি এবং লেখা উল্লম্বভাবে প্রদর্শিত হয়।

কিন্তু, যদি ধারণকারী এলিমেন্টটি 25em চেয়ে চওড়া হয়, তাহলে ছবি এবং লেখা পাশাপাশি প্রদর্শিত হয়।

কন্টেইনার কোয়েরির সাহায্যে আপনি কম্পোনেন্টগুলোকে স্বাধীনভাবে স্টাইল করতে পারেন। আপনি ধারণকারী এলিমেন্টের প্রস্থের উপর ভিত্তি করে নিয়ম লিখতে পারেন; এক্ষেত্রে ভিউপোর্টের প্রস্থ আর কোনো বিষয় নয়।

কোয়েরি একত্রিত করুন

আপনি পেজ লেআউটের জন্য মিডিয়া কোয়েরি এবং পেজের ভেতরের কম্পোনেন্টগুলোর জন্য কন্টেইনার কোয়েরি ব্যবহার করতে পারেন।

এখানে পেজটির সামগ্রিক কাঠামোতে একটি main এলিমেন্ট এবং একটি aside এলিমেন্ট রয়েছে। উভয় এলিমেন্টের ভেতরেই মিডিয়া অবজেক্ট আছে।

<body>
  <main>
     <div class="media">…</div>
     <div class="media">…</div>
  </main>
  <aside>
     <div class="media">…</div>
  </aside>
</body>

যখন ভিউপোর্ট 45em চেয়ে চওড়া হয়, তখন একটি মিডিয়া কোয়েরি main এবং aside এলিমেন্টগুলিতে গ্রিড লেআউট প্রয়োগ করে।

@media (min-width: 45em) {
  body {
    display: grid;
    grid-template-columns: 3fr 1fr;
  }
}

মিডিয়া অবজেক্টগুলোর জন্য কন্টেইনার কোয়েরি নিয়মটি একই থাকে: শুধুমাত্র তখনই একটি হরাইজন্টাল ফ্লেক্সবক্স লেআউট প্রয়োগ করা হবে, যখন ধারণকারী এলিমেন্টটি 25em চেয়ে চওড়া হবে।

কন্টেইনার কোয়েরি মাইক্রো লেআউটের ক্ষেত্রে একটি যুগান্তকারী পরিবর্তন এনেছে। এর মাধ্যমে আপনার কম্পোনেন্টগুলো ব্রাউজার ভিউপোর্টের ওপর নির্ভর না করে স্বয়ংসম্পূর্ণ হতে পারে।

আপনার বোধগম্যতা যাচাই করুন

মাইক্রো লেআউট বিষয়ে আপনার জ্ঞান পরীক্ষা করুন।

মাইক্রো লেআউটের জন্য গ্রিড এবং ফ্লেক্সবক্স উভয়ই কি উপযোগী?

সত্য

🎉 সঠিক!

মিথ্যা

ভুল। গ্রিড এবং ফ্লেক্সবক্স উভয়ই খুব দরকারি, এমনকি সবচেয়ে 'ক্ষুদ্র' লেআউটের জন্যও।

পূর্বে আপনি পৃষ্ঠা-স্তরের ম্যাক্রো লেআউট সম্পর্কে জেনেছেন। এখন আপনি কম্পোনেন্ট-স্তরের মাইক্রো লেআউট সম্পর্কে জানেন।

এরপরে, আপনি আপনার কন্টেন্টের একেবারে মূল উপাদানগুলো সম্পর্কে আরও গভীরভাবে জানবেন এবং শিখবেন কীভাবে আপনার ছবিগুলোকে রেসপন্সিভ করতে হয়। প্রথমে, আপনি রেসপন্সিভ টাইপোগ্রাফি সম্পর্কে জানবেন।