CSS লেআউট ও রেসপন্সিভ ডিজাইন

1. ১ ফান্ডামেন্টাল
   1. কোন লেআউট মোড ব্যবহার করতে হবে?
   2. কাজের নীতি
2. ২টি Flexbox
3. ৩ গ্রিড ও সাবগ্রিড
   1. কোডের উদাহরণ: গ্রিড ও সাবগ্রিড
4. ৪টি কন্টেনার কোয়েরি
   1. কোডের উদাহরণ: কন্টেনার কোয়েরি ইউনিট ব্যবহার করে ফ্লুইড টাইপোগ্রাফি
5. ৫ নেটিভ ওভারলে, অ্যাঙ্কর পজিশনিং ও স্ট্যাকিং কন্টেক্সট
6. ৬ ওভারফ্লো ট্র্যাকিং ও লেআউট স্টেবিলিটি
7. 7 ভিউপোর্ট মেকানিক্স ও ট্র্যাক ডিস্ট্রিবিউশন
8. ৮ গ্রিড লেন (মেসনারি নামেও পরিচিত)

১টি ফান্ডামেন্টাল

আরও ভালো পারফর্ম্যান্সের জন্য সম্ভব হলে ব্রাউজারের লেআউট ইঞ্জিনের উপর নির্ভর করুন। হার্ডকোড করা ডাইমেনশন বা জটিল মিডিয়া-কোয়েরি ব্যবহার করার আগে ইন্ট্রিনসিক সাইজিং, লজিক্যাল প্রপার্টি ও aspect-ratio ব্যবহার করুন।

১.১ কোন লেআউট মোড ব্যবহার করতে হবে?

ডিসিশন ট্রি উপর থেকে নিচে পর্যন্ত দেখুন এবং প্রথম ম্যাচেই থেমে যান। মনে রাখবেন যে লেআউটগুলি একে অপরের মধ্যে নেস্ট করা যেতে পারে এবং প্রতিটি সিদ্ধান্ত সেই কন্টেনারের ব্যবহারের উপর ভিত্তি করে নেওয়া হয়।

1. এটি কি আইটেমের একটি সাধারণ সারি অথবা কলাম? ফ্লেক্সবক্স ব্যবহার করুন — 1D, কন্টেন্ট-ফার্স্ট, কন্টেন্ট একটি অক্ষ বরাবর ডিস্ট্রিবিউট করা হয়।
2. নেস্টেড এলিমেন্ট কি তার গ্র্যান্ডপেরেন্ট গ্রিডের ট্র্যাকের সাথে সারিবদ্ধ হতে হবে? সাবগ্রিড ব্যবহার করুন — 2D, সম্পর্ক-প্রথম, পেরেন্ট ট্র্যাক ইনহেরিট করে যাতে গ্র্যান্ডচাইল্ডরা ভাইবোনদের সাথে সারিবদ্ধ হতে পারে।
3. এটি কি সারি এবং কলাম সহ একটি জটিল পৃষ্ঠা বা কম্পোনেন্ট স্ট্রাকচার? গ্রিড ব্যবহার করুন — 2D, লেআউট-ফার্স্ট, আপনি স্কেলিটন নির্ধারণ করেন এবং কন্টেন্ট সেটি পূরণ করে।
4. কন্টেন্টটি কি গদ্যের একটি দীর্ঘ প্রবাহ যা ভারসাম্যপূর্ণ কলামে বিভক্ত করা উচিত? মাল্টি-কলাম ব্যবহার করুন — 1D ফ্লো, খবরের কাগজের স্টাইল।
5. বিভিন্ন উচ্চতার আইটেম কি শক্ত করে প্যাক করতে হবে? আজই grid-auto-flow: dense-এর সাথে গ্রিড ব্যবহার করুন; নেটিভ মেসনারি (ওরফে "গ্রিড লেন") তখনই ব্যবহার করুন যখন এটি আপনার বেসলাইন টার্গেটে শিপ করা হয় (§8 দেখুন)।
6. কোনও এলিমেন্টকে কি পৃষ্ঠার উপরে ভাসতে হবে এবং DOM সীমানা বা স্ট্যাকিং কন্টেক্সট জুড়েও ট্রিগারের সাথে স্পেশিয়ালি টেথারড থাকতে হবে? অ্যাঙ্কর পজিশনিং ব্যবহার করুন — ট্রিগারে anchor-name, ওভারলেতে position-anchor (§5 দেখুন)।

১.২ কাজের নীতি

• লেআউট ডাইমেনশন ও স্পেসিংয়ের জন্য লজিক্যাল প্রপার্টি (inline-size, block-size, margin-inline, padding-block, inset-inline-start) ব্যবহার করুন — সম্পূর্ণ কভারেজের জন্য CSS: আধুনিক আর্কিটেকচার দেখুন।
• কন্টেন্ট-ফার্স্ট বনাম লেআউট-ফার্স্ট মেন্টাল মডেল প্রয়োগ করুন: আইটেম ফ্লো নির্দেশ করলে ফ্লেক্সবক্স, আপনি প্রথমে স্কেলিটন নির্ধারণ করলে গ্রিড।
• একটি ডিক্লারেশনে দুটি অক্ষ জুড়ে অ্যালাইন করতে place-* শর্টহ্যান্ড (place-content, place-items, place-self) ব্যবহার করুন।
• ফিক্সড width/height-এর আগে ইন্ট্রিনসিক সাইজিং (min-content, max-content, fit-content()) ও ফ্লেক্সিবল ট্র্যাক (fr, minmax()) ব্যবহার করুন — কম মিডিয়া কোয়েরি, আরও রেজিলিয়েন্ট লেআউট।
• লেআউট সংক্রান্ত সমস্যা আড়াল করতে overflow: hidden ব্যবহার করবেন না — সোর্সে গিয়ে সেগুলি ঠিক করুন। যেমন, <canvas>, <img>, <svg>, <video>, <iframe>-এর মতো নির্দিষ্ট কিছু রিপ্লেস করা এলিমেন্ট ডিফল্ট হিসেবে display: inline ব্যবহার করে, যা নির্দিষ্ট কিছু লেআউটে ফাঁক যোগ করতে পারে। overflow দিয়ে ফাঁকা জায়গা ক্লিপ করার পরিবর্তে, ব্লক ডিসপ্লে-আউটসাইড ভ্যালু (যেমন, display: block, grid, flex ইত্যাদি) প্রয়োগ করে এটি সরিয়ে দিন।
• মিডিয়ার জন্য জায়গা রিজার্ভ করতে এবং অ্যাসেট লোড হওয়ার আগে লেআউট শিফ্ট প্রতিরোধ করতে aspect-ratio ব্যবহার করুন।

.sidebar       { inline-size: max-content; }    /* Size to longest unbreakable token. */
.main-content  { inline-size: fit-content; }    /* Grow to available space, no further. */
.media         { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; }
body.centered  { display: grid; place-content: center; min-block-size: 100dvb; }

calc-size() এবং কনস্ট্রেন্ট-অ্যাওয়ার ইন্ট্রিনসিক সাইজিংয়ের জন্য, ইন্ট্রিনসিক সাইজ দিয়ে গণনা করুন দেখুন।

২টি ফ্লেক্সবক্স

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

করণীয়:

• display: flex-এর সাথে একটি প্রসঙ্গ স্থাপন করুন এবং flex-direction (row ডিফল্ট) দিয়ে প্রধান অক্ষ সেট করুন।
• ওভারফ্লো হওয়ার সম্ভাবনা থাকলে, সবসময় flex-wrap: wrap ব্যবহার করুন — overflow: auto/hidden ছাড়া nowrap ব্যবহার করলে, সংকীর্ণ ভিউপোর্টে স্পিল হবে।
• কমপ্যাক্ট আইটেমের (যেমন ট্যাগ ক্লাউড, ফিল্টার পিল, বোতাম গ্রুপ বা নেভিগেশন লিঙ্ক) র‍্যাপ করা সারিতে flex-wrap: wrap-এর পরে flex-wrap: balance লেয়ার করুন যাতে লাইন জুড়ে আইটেমগুলি সমানভাবে ডিস্ট্রিবিউট করা যায় এবং শেষ সারিতে কোনও একটি আইটেম একা থেকে যাওয়া আটকানো যায়; যেসব ব্রাউজারে এই সুবিধা নেই সেগুলি wrap-এ ফিরে যায়।
• আইটেমে flex-grow/flex-shrink/flex-basis আলাদাভাবে সেট করার পরিবর্তে flex শর্টহ্যান্ড <grow> <shrink> <basis> (যেমন, flex: 1 1 250px) ব্যবহার করুন।
• চাইল্ড মার্জিনের পরিবর্তে আইটেমের মধ্যে স্পেসিংয়ের জন্য gap (বা row-gap/column-gap লংহ্যান্ড) ব্যবহার করুন।
• safe (যেমন, align-items: safe center) দিয়ে প্রিফিক্স পজিশনাল অ্যালাইনমেন্ট করুন যাতে কন্টেন্ট ফোকাস করার সময় কন্টেনারের সাইজ কন্টেন্টের থেকে ছোট হলেও কন্টেন্ট কেটে না যায়।
• margin-inline-start: auto (বা margin-block-start: auto) ব্যবহার করে মূল অক্ষের শেষ প্রান্তে একটি আইটেম পুশ করুন — এটি হল স্ট্যান্ডার্ড এস্কেপ হ্যাচ।
• align-self-এর মাধ্যমে আইটেম প্রতি ক্রস-অ্যাক্সিস অ্যালাইনমেন্ট ওভাররাইড করুন।
• ক্রস অ্যাক্সিসে সব আইটেমকে কেন্দ্রে রাখতে align-items ব্যবহার করুন; কোনও একটি আইটেমকে দুটি অ্যাক্সিসেই স্বাধীনভাবে কেন্দ্রে রাখতে margin: auto ব্যবহার করুন; কন্টেনার র‍্যাপ করলে এবং সারি জুড়ে অতিরিক্ত জায়গা থাকলে তবেই align-content ব্যবহার করুন।
• ফ্লেক্স আইটেমে min-inline-size: 0 (বা min-width: 0) সেট করুন যাতে দীর্ঘ অবিচ্ছেদ্য কন্টেন্ট (URL, কোড, দীর্ঘ স্ট্রিং) থাকে — ফ্লেক্স আইটেম ডিফল্টভাবে তাদের কন্টেন্টের সাইজের নিচে সঙ্কুচিত হবে না, যার ফলে ওভারফ্লো হবে।

এগুলি করবেন না:

• ফ্লেক্স আইটেমে justify-self ব্যবহার করবেন না — এটি শুধুমাত্র গ্রিড, ব্লক এবং অ্যাবসোলিউট-পজিশনড লেআউটে কাজ করে। পরিবর্তে অটো মার্জিন ব্যবহার করুন।
• ইন্ট্যার‍্যাক্টিভ কন্টেন্ট আবার সাজাতে order বা flex-direction: *-reverse ব্যবহার করবেন না। এগুলি শুধুমাত্র ভিজ্যুয়াল অর্ডার পরিবর্তন করে; DOM অর্ডার এখনও ক্রমিক ফোকাস পরিচালনা করে, তাই কীবোর্ড ট্যাব ফ্লো ব্যবহারকারী যা দেখেন তার সাথে মিলবে না।
• space-around (শেষে অর্ধেক ফাঁক) এবং space-evenly (আগে, মাঝে ও পরে সমান ফাঁক) যেন গুলিয়ে না যায়।
• অ্যাক্সিস ফ্লিপের কথা ভুলবেন না: যখন flex-direction: column, justify-content ব্লক অ্যাক্সিসে অ্যালাইন করে এবং align-items ইনলাইন অ্যাক্সিসে অ্যালাইন করে — ডিফল্টের বিপরীত।
• কন্টেনার এবং তার চাইল্ড এলিমেন্ট, দুটিরই সাইজ এমনভাবে সেট করবেন না যাতে একটি অন্যটিকে পূরণ করে — এটি ওভারফ্লো এবং অপ্রত্যাশিত ফলাফল দেখানোর একটি সাধারণ কারণ। একটি সাইডকে নির্দিষ্ট সাইজ দিন।
• একই আইটেমে flex-basis এবং width/inline-size সেট করবেন না — ফ্লেক্স কনটেক্সটে flex-basis অগ্রাধিকার পায় এবং width উপেক্ষা করা হয়। ফ্লেক্স আইটেমের সাইজ নির্ধারণের জন্য single source of truth হিসেবে flex-basis (বা flex শর্টহ্যান্ড) ব্যবহার করুন।

.card-grid        { display: flex; flex-flow: row wrap; gap: 1rem; }
.card-item        { flex: 1 1 250px; }                  /* grow, shrink, basis */
.card-item-action { margin-inline-start: auto; }        /* Push to main-axis end. */
.toolbar          { display: flex; align-items: safe center; }
.tag-list         { display: flex; flex-wrap: wrap; flex-wrap: balance; gap: 0.5rem; }

৩ গ্রিড ও সাবগ্রিড

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

গ্রিড ফিচার বেছে নেওয়া:

• আপনার ঠিক কতগুলি কলাম প্রয়োজন তা কি আপনি জানেন?
  • হ্যাঁ — অনুপযুক্ত ট্র্যাক ব্যবহার করুন (grid-template-columns: 200px 1fr, repeat(3, 1fr) ইত্যাদি)
  • বিভিন্ন কলামের জন্য কি বিভিন্ন সাইজ প্রয়োজন (সাইডবার + মূল, সবকটি স্প্যান করা হেডার)? → নামযুক্ত, পাঠযোগ্য অঞ্চলের জন্য grid-template-areas ব্যবহার করুন
  • সব কলাম কি একই রকম নাকি লাইন নম্বর অনুযায়ী সাজানো? → repeat(N, ...) বা নাম দেওয়া লাইন ব্যবহার করুন
  • না (রেসপন্সিভ, অজানা আইটেম সংখ্যা) — repeat(auto-fit, minmax(min, 1fr)) ব্যবহার করুন
  • শেষ সারির আইটেমগুলি কি বাকি জায়গা পূরণ করার জন্য প্রসারিত করা উচিত? → auto-fit
  • শেষ সারির খালি ট্র্যাক কি তাদের ন্যূনতম সাইজ ধরে রাখবে (কলামের ঘোস্ট স্লট সংরক্ষণ করে)? → auto-fill
• আপনাকে কি কোনও নির্দিষ্ট লোকেশনে আইটেম রাখতে হবে?
  • হ্যাঁ — grid-column: <start> / <end> বা grid-area: <name> ব্যবহার করুন
  • না (শুধু একাধিক ট্র্যাক জুড়ে, ফ্লো পজিশন গুরুত্বপূর্ণ নয়) — grid-column: span <n> ব্যবহার করুন
• চাইল্ড এলিমেন্টকে কি পেরেন্ট গ্রিডের ট্র্যাক সাইজ (সিবলিং জুড়ে র‍্যাগড-এজ অ্যালাইনমেন্ট) ইনহেরিট করতে হবে?
  • হ্যাঁ — প্রভাবিত অক্ষে সাবগ্রিড ব্যবহার করুন
  • প্রতিটি সেলে চাইল্ড এলিমেন্টের সংখ্যা কি পরিবর্তনশীল? → সাবগ্রিড শুধুমাত্র একটি অক্ষ; অন্যটির জন্য grid-auto-rows/grid-auto-columns ব্যবহার করুন
  • Is the child count fixed? → দুটি অক্ষেই সাবগ্রিড ঠিক আছে
  • না — স্ট্যান্ডার্ড গ্রিড, কোনও সাবগ্রিডের প্রয়োজন নেই

করণীয়:

• display: grid-এর সাহায্যে প্রসঙ্গ সেট করুন।
• জটিল পৃষ্ঠা-লেভেল লেআউটের জন্য grid-template-areas ব্যবহার করুন — এলাকার নামগুলি স্ব-ডকুমেন্টিং এবং এক নজরে পড়ার জন্য ঘোষণাটি সারি এবং কলামে সারিবদ্ধ করা যেতে পারে।
• রেসপন্সিভ কার্ড গ্রিডের জন্য repeat(auto-fit, minmax(200px, 1fr)) ব্যবহার করুন যা সারি পূরণ করার জন্য ফিল করা ট্র্যাক প্রসারিত করে অথবা খালি রিপিটেড ট্র্যাক তাদের ন্যূনতম সাইজে সংরক্ষণ করতে auto-fill ব্যবহার করুন।
• আনুপাতিক ট্র্যাক ডিস্ট্রিবিউশনের জন্য fr এবং ফ্লেক্সিবল-কিন্তু-বাউন্ডেড ট্র্যাকের জন্য minmax(min, max) ব্যবহার করুন।
• ট্র্যাক জুড়ে সাইজ করতে grid-column: span <n>, নির্দিষ্ট লাইনে রাখতে grid-column: <start> / <end> বা নাম দেওয়া অঞ্চলের জন্য grid-area: <name> ব্যবহার করে আইটেম পজিশন করুন।
• কার্ডের তালিকায় "অসমাপ্ত প্রান্ত" সংক্রান্ত সমস্যার সমাধান করতে সাবগ্রিড (grid-template-columns: subgrid বা grid-template-rows: subgrid) ব্যবহার করুন — শীর্ষক, মেটাডেটা ও CTA-এর মতো ইন্টার্নাল এলিমেন্টগুলি একই লেভেলে থাকা অন্যান্য এলিমেন্টের সাথে সারিবদ্ধভাবে থাকে।
• পুরনো ব্রাউজারের জন্য একই-ক্যাসকেড ফলব্যাক হিসেবে পূর্ববর্তী এক্সপ্লিসিট grid-template-rows/-columns ঘোষণার সাথে একটি সাবগ্রিড ঘোষণা পেয়ার করুন।

এগুলি করবেন না:

• আইটেম কন্টেন্ট থেকে auto-fit/auto-fill ট্র্যাক সাইজ আসবে বলে আশা করবেন না — এটি repeat() সাইজ আর্গুমেন্ট থেকে আসে।
• ইন্টার‌্যাক্টিভ কন্টেন্টে grid-auto-flow: dense ব্যবহার করবেন না। এটি আইটেমগুলিকে দক্ষতার সাথে প্যাক করে কিন্তু সেগুলিকে দৃশ্যত পুনর্বিন্যাস করে, DOM-অর্ডার কীবোর্ড ট্যাব ফ্লো ভেঙে দেয়।
• চাইল্ড কাউন্ট পরিবর্তনশীল হলে, দুটি অক্ষেই সাবগ্রিড প্রয়োগ করবেন না। শেষ ট্র্যাকে অতিরিক্ত ল্যান্ড; এর পরিবর্তে অন্তর্নিহিত অক্ষের জন্য grid-auto-rows/grid-auto-columns ব্যবহার করুন।
• justify-items/align-items (ট্র্যাকের মধ্যে আইটেম কন্টেন্ট অ্যালাইন করে) এবং justify-content/align-content (কন্টেনারের মধ্যে গ্রিড ট্র্যাক অ্যালাইন করে) প্রপার্টি দুটির মধ্যে গুলিয়ে ফেলবেন না। ভুলটি ব্যবহার করলে কোনও প্রভাব পড়ে না।
• কন্টেনারে নির্দিষ্ট inline-size ছাড়া repeat(auto-fit/auto-fill, ...) ব্যবহার করবেন না — display: inline-grid বা সাইজ না করা ফ্লেক্স আইটেমের মধ্যে কন্টেনারের ভাগ করার মতো কোনও প্রস্থ থাকে না, যার ফলে ট্র্যাকের সংখ্যা অনুমান করা যায় না।

৩.১ কোডের উদাহরণ: গ্রিড ও সাবগ্রিড

পৃষ্ঠার শেল: <main class="page-layout">-এ <header>, <aside>, <div class="card">টি চাইল্ড সহ একটি <section class="card-grid"> এবং <footer> আছে।

/* Align grid-template-areas in rows and columns for readability. */
.page-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  gap: 1.5rem;
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
footer  { grid-area: footer; }

.card-grid {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-template-rows: auto 1fr; /* title block, body block */
  gap: 1rem;
}

.card {
  grid-row: span 2;
  display: grid;
  /* Same-cascade fallback: ignored when subgrid is supported. */
  grid-template-rows: auto 1fr;
  grid-template-rows: subgrid;
}

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

ভিউপোর্টের পরিবর্তে পূর্বপুরুষ কন্টেনারের সাইজ (বা কম্পিউটেড স্টাইল) কোয়েরি করুন। মেন্টাল মডেল: কন্টেনার কোয়েরি = কম্পোনেন্ট কন্টেক্সট; মিডিয়া কোয়েরি = গ্লোবাল পৃষ্ঠা লেআউট এবং ব্যবহারকারীর পছন্দ (prefers-color-scheme, prefers-reduced-motion)।

করণীয়:

• র‌্যাপারের ডিসেন্ড্যান্ট কোয়েরি করার আগে container-type: inline-size (শুধুমাত্র প্রস্থ কোয়েরি) বা container-type: size (উভয় অক্ষ) সহ একটি কন্টেনমেন্ট কন্টেক্সট তৈরি করুন।
• নেস্টেড কনটেক্সট একে অপরের সাথে ওভারল্যাপ করলে, container-name (বা container শর্টহ্যান্ড: container: card / inline-size) দিয়ে কন্টেনারের নাম দিন।
• ফ্লুইড টাইপ ও স্পেসিং গণনা করার সময় কন্টেনার কোয়েরি ইউনিট অন্তর্ভুক্ত করুন: cqi/cqb (লজিক্যাল ইনলাইন/ব্লক), cqw/cqh (ফিজিক্যাল), cqmin/cqmax.
• block-size-এর জন্য নির্দিষ্ট container-type: size ব্যবহার করুন — এটি না করলে, ডিসেন্ডেন্ট ভেঙে পড়ে কারণ সাইজ কন্টেনমেন্ট কন্টেনারকে তার কন্টেন্ট উপেক্ষা করতে বাধ্য করে।

এগুলি করবেন না:

• container-type ভ্যালু হিসেবে block-size ব্যবহার করবেন না — এটি সঠিক নয়। দুটি অক্ষের জন্যই size ব্যবহার করুন।
• container-type ঘোষণা করার পরে, চিলড্রেনের অন্তর্নিহিত সাইজ কন্টেনারকে প্রভাবিত করবে বলে আশা করবেন না। কন্টেনমেন্ট অ্যাক্টিভ হয়ে গেলে, কন্টেনারটি এমনভাবে গণনা করা হয় যেন এতে কোনও চাইল্ড নেই।
• উপযুক্ত নয় এমন অ্যানসেস্টারের ডিসেন্ডেন্টের মধ্যে কন্টেনার কোয়েরি ইউনিটের উপর নির্ভর করবেন না; সেগুলি ছোট ভিউপোর্টে (svw/svh) ফিরে যায়।

৪.১ কোডের উদাহরণ: কন্টেনার কোয়েরি ইউনিট ব্যবহার করে ফ্লুইড টাইপোগ্রাফি

.card-wrapper {
  container: card / inline-size; /* shorthand for container-name / container-type */
}

@container card (inline-size > 400px) {
  .content {
    display: flex;
    gap: 2rem;
  }
}

.title {
  /* Fluid type bound to the container width, not the viewport. */
  font-size: clamp(1rem, 4cqi, 2rem);
}

কম্পোনেন্ট-চালিত রেসপন্সিভ স্টাইলিং প্যাটার্নের জন্য, সাইজ অ্যাওয়ার স্টাইলিং এবং ফ্লুইড স্কেলিং দেখুন।

৫ নেটিভ ওভারলে, অ্যাঙ্কর পজিশনিং ও স্ট্যাকিং কনটেক্সট

প্রতিটি ওভারলে প্রিমিটিভ কখন ব্যবহার করতে হবে:

• ট্রানজিয়েন্ট, নন-মোডাল UI (ফ্লাইআউট, টোস্ট, টুলটিপ)-এর জন্য popover ব্যবহার করুন — উপরের স্তরে থাকে, কোনও z-index ম্যানেজমেন্টের প্রয়োজন নেই।
• মোডাল ইন্টার‍্যাকশনের জন্য .showModal()-এর সাথে <dialog> ব্যবহার করুন, যার জন্য ফোকাস ট্র্যাপিং ও ইনার্ট ব্যাকড্রপ প্রয়োজন।
• একই এলিমেন্টে popover এবং .showModal() একসাথে ব্যবহার করবেন না — এগুলি রানটাইম স্টেটের ক্ষেত্রে একে অপরের থেকে আলাদা।

অ্যাঙ্কর পজিশনিং (ওভারলের স্পেশিয়াল লেআউট):

• ট্রিগারের সাপেক্ষে ওভারলের অবস্থান ও সাইজ নির্ধারণ করতে position-area (বা ইনসেটে anchor()) এবং anchor-size() ব্যবহার করুন।
• ওভারফ্লো ভিউপোর্ট ওভারফ্লো করলে ব্রাউজারকে আবার পজিশন করতে দিতে position-try-fallbacks: flip-block (বা flip-inline) ব্যবহার করুন।
• একটি position-area ভ্যালুতে ফিজিক্যাল ও লজিক্যাল কীওয়ার্ড একসাথে ব্যবহার করবেন না — একটি কোঅর্ডিনেট সিস্টেম বেছে নিন।
• @supports (anchor-name: --x)-এর মাধ্যমে ফিচার শনাক্ত করুন এবং অ্যাবসলিউট-পজিশন ফলব্যাক প্রদান করুন।

সম্পূর্ণ প্রয়োগের বিবরণ, পলিফিল স্ট্র্যাটেজি এবং popover ভ্যালু রেফারেন্সের জন্য, ডিক্লারেটিভ ডায়ালগ ও পপওভার কন্ট্রোল এবং পজিশন অ্যাওয়ার টুলটিপ দেখুন। ড্রপডাউন, ফ্লাইআউট ও ট্যাব ইন্ডিকেটরে প্রয়োগ করা অ্যাঙ্কর পজিশনিংয়ের জন্য Viewport-Aware Dropdowns ও Anchor Positioning Tab Underline দেখুন।

6 ওভারফ্লো ট্র্যাকিং ও লেআউট স্টেবিলিটি

লেআউট শিফ্ট, স্ক্রলবার ও ক্লিপিং অনুমানযোগ্যভাবে ম্যানেজ করুন।

করণীয়:

• overflow: auto ব্যবহার করুন যাতে কন্টেন্ট উপচে পড়লে তবেই স্ক্রলবার দেখা যায়।
• স্ক্রল কন্টেনার তৈরি না করেই কন্টেন্ট ক্লিপ করতে overflow: clip ব্যবহার করুন; overflow-clip-margin-এর মাধ্যমে স্পিলওভার বেছে নিন।
• স্ক্রলবারের জন্য জায়গা রিজার্ভ করতে এবং কন্টেন্ট বাড়লে লেআউট শিফ্ট প্রতিরোধ করতে scrollbar-gutter: stable ব্যবহার করুন।
• নেস্টেড স্ক্রল অঞ্চলে (যেমন সাইডবার, মোডাল এবং তালিকা) overscroll-behavior: contain (বা none) ব্যবহার করুন যাতে স্ক্রল চেইন পৃষ্ঠায় বাবল না করে, অথবা মধ্যবর্তী স্ক্রল র‍্যাপারে (যেমন সোয়াইপ-টু-রিভিল ট্র্যাক) overscroll-behavior: chain ব্যবহার করুন যখন অতিরিক্ত স্ক্রল স্থানীয় রাবার-ব্যান্ড বাউন্স ট্রিগার না করে পূর্বপুরুষ স্ক্রলারে প্রচার করা উচিত।

• মাল্টি-লাইন ট্রাঙ্কেশনের জন্য -webkit-line-clamp + display: -webkit-box + -webkit-box-orient: vertical ট্রায়ড ব্যবহার করুন — প্রিফিক্স থাকা সত্ত্বেও, এই প্যাটার্ন সম্পূর্ণভাবে নির্দিষ্ট করা হয়েছে এবং এটি বাতিল করা হয়নি। এর পাশাপাশি প্রিফিক্স ছাড়া line-clamp শর্টহ্যান্ড ঘোষণা করুন; যেসব ব্রাউজারে এখনও এটি কাজ করে না সেগুলি কোনও ক্ষতি না করেই প্রপার্টি উপেক্ষা করে। এগুলি করবেন না:

• auto দিয়ে কাজ হয়ে গেলে overflow: scroll ব্যবহার করবেন না — স্ক্রল করার মতো কিছু না থাকলেও scroll স্ক্রলবার দেখায়।

• আপনি শুধু ক্লিপ করতে চাইলে overflow: hidden ব্যবহার করবেন না — hidden একটি স্ক্রল কন্টেনার তৈরি করে যা প্রোগ্র্যামাটিক উপায়ে স্ক্রল করা যায়।

.scrollable-list {
  max-block-size: 400px;
  overflow-y: auto;
  scrollbar-gutter: stable;       /* Reserve scrollbar space. */
  overscroll-behavior: contain;   /* No scroll chaining into the page. */
}

.snippet {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;                  /* Ignored where unsupported. */
  overflow: clip;
}

overflow: clip এবং overflow-clip-margin-এর গভীরতার জন্য, ওভারফ্লো ক্লিপিং কন্ট্রোল দেখুন। সোয়াইপ-টু-রিভিল UI-তে overscroll-behavior: chain-এর সাথে নেস্টেড স্ক্রল হ্যান্ডঅফের জন্য, সোয়াইপ-টু-রিভিল দেখুন। স্ক্রলবারের রঙ, সাইজ ও থিম সংক্রান্ত তথ্যের জন্য, স্ক্রলবারের রঙ বা ঘনত্ব কাস্টমাইজ করুন, ডার্ক মোড এবং হাই-কনট্রাস্ট সংক্রান্ত পছন্দ অনুযায়ী স্ক্রলবার অ্যাডাপ্ট করুন দেখুন।

৭ ভিউপোর্ট মেকানিক্স ও ট্র্যাক ডিস্ট্রিবিউশন

• মোবাইল লেআউট কন্টেনারের জন্য dvh/dvw ব্যবহার করুন যা ব্রাউজার UI শিফটিং (URL বার কলাপ্স/এক্সপ্যান্ড) অবশ্যই বিবেচনা করবে।
• সম্পূর্ণ প্রস্থের লে-আউটের জন্য 100vw ব্যবহার করবেন না — এটি স্ক্রলবারের প্রস্থ উপেক্ষা করে এবং অনুভূমিক ওভারফ্লো ঘটায়। এর পরিবর্তে 100%, 100dvw বা 100svw ব্যবহার করুন।

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

৮টি গ্রিড লেন (মেসনরি নামেও পরিচিত)

"গ্রিড লেন" (যেমন, display: grid-lanes) নামে স্পেসিফিকেশনটি ডেভেলপ করা হচ্ছে, যেখানে আগের এক্সপেরিমেন্টাল প্রোটোটাইপে grid-template-rows: masonry ব্যবহার করা হয়েছিল।

করণীয়:

• আজকে টাইট প্যাকিংয়ের জন্য grid-auto-flow: dense সহ গ্রিড ব্যবহার করুন, মেনে নিন যে DOM অর্ডার ভিজ্যুয়াল অর্ডারের সাথে নাও মিলতে পারে।
• আইটেমগুলি সমান-ওজনের কার্ডের পরিবর্তে ডকুমেন্ট ফ্র্যাগমেন্ট হলে, কন্টেন্ট-হেভি মেসনরি-লাইক ফ্লোর জন্য মাল্টি-কলাম (columns: 3; column-gap: 1rem) ব্যবহার করুন।
• grid-template-rows: masonry-কে শুধুমাত্র প্রোগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে বিবেচনা করুন — @supports-এর মাধ্যমে ফিচার শনাক্ত করুন।

এগুলি করবেন না:

• আপনার বেসলাইন টার্গেট পূরণ না হওয়া পর্যন্ত grid-template-rows: masonry-কে হার্ড প্রয়োজনীয়তা হিসেবে শিপ করবেন না।

.gallery       { columns: 3 200px; column-gap: 1rem; }
.gallery > *   { break-inside: avoid; margin-block-end: 1rem; }

@supports (grid-template-rows: masonry) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-rows: masonry;
    gap: 1rem;
    columns: unset;
  }
}