প্রচলিত লেআউট প্যাটার্ন — sidebar, holy grail, dashboard আর gallery

১ · প্যাটার্ন কেন — একই সমস্যা, বারবার একই সমাধান

পর্ব ২৫ আর ২৬-এ আপনি Flexbox শিখেছেন, পর্ব ২৭ আর ২৮-এ Grid. অর্থাৎ যন্ত্রপাতি এখন আপনার হাতে। কিন্তু নতুনরা প্রায়ই একটি জায়গায় আটকে যান: একটি তৈরি ওয়েবসাইটের ছবি দেখে ঠিক বুঝতে পারেন না, “এটা কোথা থেকে শুরু করব?” এই পর্বের কাজ সেই ফাঁকটুকু ভরানো। আমরা নতুন কোনো property শিখব না; বরং দেখব, চেনা property-গুলো জুড়ে বাস্তবের পরিচিত কাঠামোগুলো কীভাবে তৈরি হয়।

ঢাকার যেকোনো এলাকায় নতুন বাড়ি তৈরি হতে দেখলে খেয়াল করবেন, রাজমিস্ত্রি প্রতিবার নতুন করে ভাবেন না সিঁড়ি কোথায় যাবে বা বারান্দা কেমন হবে। কয়েকটি পরীক্ষিত নকশা আছে — সিঁড়িঘর মাঝে, দুই পাশে দুই ফ্ল্যাট; সামনে বারান্দা, পেছনে রান্নাঘর। ওয়েবেও তাই। প্রায় প্রতিটি সাইট ঘুরেফিরে কয়েকটি একই কাঠামো ব্যবহার করে। এগুলোকে বলে layout pattern. একবার চিনলে যেকোনো নকশা দেখে আপনি মনে মনে ভাগ করতে পারবেন: “ওপরে pancake, ভেতরে sidebar, ডানে কার্ডের grid.”

লেআউটকে দুই স্তরে ভাবা কাজে দেয়। বড় কাঠামো (macro layout) — পুরো পাতা কয়টি এলাকায় ভাগ হবে: header, nav, main, aside, footer. ছোট কাঠামো (micro layout) — একটি কার্ড বা ফর্মের ভেতরে জিনিসগুলো কীভাবে বসবে। সাধারণ নিয়ম: যেখানে সারি আর কলাম একসাথে মেলাতে হবে, সেখানে Grid; যেখানে জিনিস এক দিকে লাইন ধরে বসবে আর দরকারে ভাঁজ হবে, সেখানে Flexbox. বেশিরভাগ বাস্তব পাতায় দুটো একসাথেই থাকে — বাইরে Grid, ভেতরে Flexbox, বা উল্টোটাও।

২ · Layout primitive — ছোট ইট দিয়ে বড় বাড়ি

২০১৯ সালে Heydon Pickering আর Andy Bell “Every Layout” নামে একটি বই ও ওয়েবসাইট প্রকাশ করেন। তাঁদের মূল কথা: প্রতিটি পাতার জন্য আলাদা আলাদা লেআউট-কোড না লিখে কয়েকটি ছোট, একক-দায়িত্বের নিয়ম বানান — প্রতিটি শুধু একটি কাজ করবে, কিন্তু খুব ভালোভাবে। এগুলোকে তাঁরা বলেন layout primitive. নিচের টেবিলের নামগুলো তাঁদের দেওয়া; কোডগুলো এই কোর্সের জন্য নিজের মতো করে লেখা সরল রূপ, তাঁদের বইয়ের হুবহু কোড নয় (মূল রূপগুলো আরও নমনীয়, CSS variable দিয়ে সাজানো)।

এখানে কয়েকটি শব্দ নতুন মনে হতে পারে। inline-size মানে লেখার দিকের মাপ — বাংলা বা ইংরেজির মতো বাঁ-থেকে-ডানের লেখায় সেটি চওড়া; block-size মানে উচ্চতা। এদের বলে logical property; পুরো গল্প পর্ব ৩৫-এ। আর dvh হলো ফোনের ঠিকানা-বার ওঠানামা হিসাবে ধরা পর্দার উচ্চতা (dynamic viewport একক, পর্ব ২০-এ দেখেছেন)।

নিচে একটি চাকরির বিজ্ঞপ্তির কার্ড — তিনটি primitive একসাথে: বাইরে Center, কার্ডের ভেতরে Stack, আর দক্ষতার ট্যাগগুলো Cluster. প্রতিটি নিয়ম আলাদা, কেউ কারও কাজে নাক গলায় না।

.center {                 /* Center */
  box-sizing: content-box;
  max-inline-size: 40ch;
  margin-inline: auto;
  padding-inline: 1rem;
}
.stack {                  /* Stack */
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.cluster {                /* Cluster */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* শুধু সাজসজ্জা */
.card { border: 1px solid #cbd5e1; border-radius: 12px;
        padding: 1rem; font-family: sans-serif; }
.cluster span { background: #e0f2fe; border-radius: 999px;
                padding: 0.2rem 0.7rem; }
h2, p { margin: 0; }

একটি প্রশ্ন জাগতে পারে: Center-এ box-sizing: content-box কেন, যখন পর্ব ১৯-এ সবাইকে border-box করতে শিখেছেন? কারণ এখানে আমরা চাই লেখার চওড়া ৪০ অক্ষর থাকুক, আর padding তার বাইরে যোগ হোক — ফোনে লেখা কিনারায় লেগে যাবে না, অথচ বড় পর্দায় লেখার মাপ ঠিক থাকবে। প্যাটার্ন মানেই অন্ধ নিয়ম নয়; প্রতিটি লাইনের পেছনে একটি কারণ থাকে।

Switcher — একটি অদ্ভুত কিন্তু চমৎকার হিসাব

তিনটি সমান বাক্স চাই: চওড়া জায়গায় পাশাপাশি, সরু জায়গায় ওপর-নিচে — কিন্তু কখনোই “দুটি ওপরে, একটি নিচে” নয়। Heydon Pickering এর একটি কৌশল লেখেন, যার মজার নাম দেন “Flexbox Holy Albatross”:

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.switcher > * {
  flex-grow: 1;
  /* container 30rem-এর বেশি চওড়া: ফল ঋণাত্মক → 0 ধরা হয় → সবাই এক সারিতে
     container 30rem-এর কম চওড়া: ফল বিশাল ধনাত্মক → প্রত্যেকে আলাদা সারিতে */
  flex-basis: calc((30rem - 100%) * 999);
}

এখানে 100% মানে container-এর চওড়া। container 40rem হলে (30rem − 40rem) × 999 একটি বড় ঋণাত্মক সংখ্যা, আর flex-basis ঋণাত্মক হতে পারে না, তাই ব্রাউজার 0 ধরে — সবাই এক সারিতে বসে বাড়তি জায়গা সমান ভাগ করে নেয়। container 25rem হলে ফল প্রায় ৫০০০rem — কোনো সারিতেই দুটি আঁটে না, তাই প্রত্যেকে নিজের সারিতে। মাঝামাঝি কোনো অবস্থা নেই; সিদ্ধান্তটা হয় ঠিক 30rem-এ। আর এই সিদ্ধান্ত নেয় container-এর চওড়া, পুরো পর্দার নয় — অর্থাৎ একই কম্পোনেন্ট sidebar-এর সরু জায়গায় এক রকম, মূল অংশের চওড়া জায়গায় আরেক রকম আচরণ করে।

৩ · Media query ছাড়াই ভাঁজ হওয়া sidebar

চাকরির সাইট, অনলাইন দোকান, সংবাদের আর্কাইভ — প্রায় সবখানে একটি পরিচিত কাঠামো: বাঁয়ে ফিল্টার বা মেনু, ডানে মূল তালিকা। বড় পর্দায় পাশাপাশি, ফোনে ফিল্টার ওপরে আর তালিকা নিচে। পুরোনো পদ্ধতিতে এর জন্য একটি media query লিখতে হতো: “পর্দা 768px-এর কম হলে এক কলাম।” সমস্যা হলো, পর্দা নয় — আসল প্রশ্ন হলো এই অংশটির জন্য কতটা জায়গা আছে। Every Layout-এর Sidebar primitive প্রশ্নটা ঠিক এভাবে ব্রাউজারকে দেয়:

.with-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.sidebar {
  flex-basis: 15rem;      /* আদর্শ চওড়া */
  flex-grow: 1;
}
.not-sidebar {
  flex-basis: 0;
  flex-grow: 999;         /* বাড়তি জায়গার প্রায় সবটাই এর */
  min-inline-size: 50%;   /* এর চেয়ে সরু হতে রাজি নয় */
}
/* দেখানোর জন্য: কোণ টেনে চওড়া বদলানো যায় */
.frame { resize: horizontal; overflow: auto; box-sizing: border-box;
         max-inline-size: 100%; border: 2px dashed #64748b; padding: 8px; }
.sidebar, .not-sidebar { padding: 0.75rem; border-radius: 8px;
                         font-family: sans-serif; }
.sidebar { background: #fef3c7; }
.not-sidebar { background: #dcfce7; }

জাদুটা কোথায়, ধাপে ধাপে দেখি। ধরুন root font-size 16px, তাই 15rem = 240px আর gap 16px. Flexbox প্রথমে প্রতিটি item-এর “শুরুর মাপ” ধরে দেখে সবাই এক সারিতে আঁটে কি না; তারপর বাড়তি জায়গা flex-grow-এর অনুপাতে ভাগ করে।

1.sidebar { flex-basis: 15rem; flex-grow: 1; }2.not-sidebar {3  flex-basis: 0;4  flex-grow: 999;5  min-inline-size: 50%;6}7/* gap: 1rem = 16px */

৪ · Pancake stack আর holy grail — পুরো পাতার কাঠামো

এবার ছোট কম্পোনেন্ট থেকে পুরো পাতায় যাই। প্রথম সমস্যাটি সবাই কখনো না কখনো দেখেছেন: কোনো পাতায় লেখা কম, তাই footer পর্দার মাঝখানে ঝুলে আছে, নিচে ফাঁকা সাদা জায়গা। সমাধানের নাম pancake stack — header, main আর footer তিনটি প্যানকেকের মতো ওপর-নিচে; মাঝেরটি বাড়তি জায়গা খেয়ে নেয়। Una Kravets ২০২০ সালে “এক লাইনের CSS-এ দশটি আধুনিক লেআউট” নামের একটি জনপ্রিয় লেখায় এই নামটি ছড়িয়ে দেন। এখানে footer-এর ভেতরে কলামও আছে — সেটি Grid primitive.

<style>
  .page {
    min-block-size: 340px;   /* আসল সাইটে: 100vh, তারপর 100dvh */
    display: grid;
    grid-template-rows: auto 1fr auto;
    font-family: sans-serif;
  }
  .page > header, .page > footer { background: #0f766e; color: #fff; padding: 0.75rem 1rem; }
  .page > main { padding: 1rem; }
  .cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1rem;
  }
  .cols h3 { margin: 0 0 0.25rem; font-size: 1rem; }
  .cols ul, .cols p { margin: 0; padding: 0; list-style: none; }
  .cols a { color: inherit; }
</style>
<div class="page">
  <header>পদ্মা ট্রাভেলস (কাল্পনিক)</header>
  <main><p>লেখা মাত্র এক লাইন, তবু footer নিচেই।</p></main>
  <footer class="cols">
    <section><h3>সেবা</h3><ul><li><a href="#bus">বাস টিকিট</a></li><li><a href="#launch">লঞ্চ টিকিট</a></li></ul></section>
    <section><h3>সাহায্য</h3><ul><li><a href="#contact">যোগাযোগ</a></li><li><a href="#refund">রিফান্ড নীতি</a></li></ul></section>
    <section><h3>ঠিকানা</h3><p>সদরঘাট, ঢাকা</p></section>
  </footer>
</div>

আসল সাইটে .page-এর বদলে সাধারণত body-তেই এই grid দেওয়া হয়, আর উচ্চতা লেখা হয় দুই লাইনে: আগে min-block-size: 100vh;, তারপর min-block-size: 100dvh;. যে ব্রাউজার dvh চেনে সে দ্বিতীয়টি নেয়, যে চেনে না সে দ্বিতীয় লাইন বাদ দিয়ে প্রথমটিতে থেকে যায় — CSS-এর অচেনা মান উপেক্ষা করার স্বভাবকে কাজে লাগানো এই সহজ fallback. (dvh এখন Baseline, তবু পুরোনো ফোনের জন্য এই অভ্যাস নিরাপদ।)

Holy grail — নকশার একটি মানচিত্র আঁকুন

পুরোনো সংবাদপত্রের ওয়েবসাইট মনে করুন: ওপরে নাম আর মেনু, নিচে footer, মাঝে তিন কলাম — বাঁয়ে বিভাগের তালিকা, মাঝে খবর, ডানে বিজ্ঞাপন বা “সর্বাধিক পঠিত”। তিন কলাম সমান উঁচু, footer সবার নিচে। একে বলে holy grail layout. Grid-এর grid-template-areas দিয়ে এটি লেখা যায় প্রায় ছবি আঁকার মতো। নিচের ধাপগুলোতে দেখুন:

.layout {
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) 1fr minmax(6rem, 10rem);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  gap: 0.5rem;
  min-block-size: 300px;
  font-family: sans-serif;
}
.layout > header { grid-area: header; }
.layout > nav    { grid-area: nav; }
.layout > main   { grid-area: main; }
.layout > aside  { grid-area: aside; }
.layout > footer { grid-area: footer; }
/* সাজসজ্জা */
.layout > * { padding: 0.75rem; border-radius: 8px; background: #e2e8f0; }
.layout > main { background: #dbeafe; }
.layout h2, .layout p { margin: 0 0 0.5rem; }

৫ · মাঝখানে পড়ার কলাম, কিনারা-ছোঁয়া সেকশন — নামওয়ালা লাইন

ব্লগ বা খবরের লেখায় একটি দ্বিধা থাকে। লেখা আরামে পড়তে হলে লাইন খুব লম্বা হওয়া চলবে না — পর্ব ২১-এ দেখেছেন, এক লাইনে মোটামুটি ৪৫–৭৫ অক্ষর আদর্শ (measure). কিন্তু মাঝে মাঝে একটি ছবি, রঙিন উদ্ধৃতি বা মানচিত্র চাই পর্দার এক কিনারা থেকে অন্য কিনারা পর্যন্ত — ছাপাখানার ভাষায় full-bleed. Center primitive দিলে সবকিছু সরু কলামে আটকে যায়, আর ছবিকে বের করতে লাগে নেগেটিভ margin-এর ঝামেলা। Grid-এর named grid line এর পরিষ্কার সমাধান দেয়। এই কৌশল Josh W. Comeau-সহ অনেকের লেখায় জনপ্রিয় হয়েছে:

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100%) [content-end]
    minmax(1rem, 1fr) [full-end];
}
.article > *           { grid-column: content; }
.article > .full-bleed { grid-column: full; }

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(65ch, 100% - 2rem) [content-end]
    minmax(1rem, 1fr) [full-end];
  row-gap: 1rem;
  font-family: sans-serif;
  line-height: 1.7;
}
.article > * { grid-column: content; margin: 0; }
body { margin: 0; }   /* প্রিভিউর ডিফল্ট 8px সরিয়ে কিনারা পর্যন্ত */
.article > .full-bleed { grid-column: full; }

.banner {
  background: linear-gradient(90deg, #0369a1, #0d9488);
  color: #fff; padding: 2.5rem 1rem; text-align: center;
}
.quote { background: #fef3c7; padding: 1rem;
         border-inline-start: 4px solid #d97706; }

৬ · অ্যাডমিন ড্যাশবোর্ড — একটি ইউনিয়ন পরিষদের ই-সেবা পোর্টাল

এবার সব জোড়া লাগাই। ধরুন “সোনাপুর” নামের একটি কাল্পনিক ইউনিয়ন পরিষদের ডিজিটাল সেন্টারের জন্য একটি dashboard বানাচ্ছেন — উদ্যোক্তা এক নজরে দেখবেন আজ কত আবেদন এলো, কোন সেবার চাহিদা বেশি, আর সাম্প্রতিক আবেদনগুলোর অবস্থা কী। (সব নাম আর সংখ্যা বানানো।) ড্যাশবোর্ডে সাধারণত পাঁচটি অংশ থাকে, আর প্রতিটির জন্য আপনি এর মধ্যেই একটি প্যাটার্ন জানেন:

.dash {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "top top" "nav main";
  min-block-size: 520px;
  font-family: sans-serif;
}
.top  { grid-area: top; background: #065f46; color: #fff; padding: 0.75rem 1rem; }
.side { grid-area: nav; background: #ecfdf5; padding: 1rem 0.75rem; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.main {
  grid-area: main;
  display: grid; gap: 1rem; align-content: start;
  padding: 1rem;
  min-inline-size: 0;            /* টেবিল যেন লেআউট না ঠেলে */
}
.stats { display: grid; gap: 0.75rem;
         grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.stat { border: 1px solid #a7f3d0; border-radius: 10px; padding: 0.75rem; }
.stat b { display: block; font-size: 1.5rem; }
.chart-box { margin: 0; }
.chart { display: flex; align-items: flex-end; gap: 0.5rem;
         block-size: 120px; border-block-end: 2px solid #94a3b8; }
.chart span { flex: 1; background: #10b981; border-radius: 4px 4px 0 0; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; inline-size: 100%; min-inline-size: 30rem; }
caption { text-align: start; font-weight: 700; padding-block-end: 0.25rem; }
th, td { border-block-end: 1px solid #e2e8f0; padding: 0.4rem; text-align: start; }

লাইনটি এত গুরুত্বপূর্ণ কেন? flex আর grid item-এর ডিফল্ট সর্বনিম্ন চওড়া auto — মানে “ভেতরের জিনিস যতটা সরু হতে পারে, তার চেয়ে সরু নয়” (min-width: auto). 30rem চওড়া টেবিল ভেতরে থাকলে main নিজেও 30rem-এর কম হতে রাজি হয় না, আর 1fr কলাম তাকে জায়গা দিতে পাতা পাশে ফুলে যায়। min-inline-size: 0 (বা কলামে minmax(0, 1fr)) বলে দেয়, “item সরু হতে পারবে; ভেতরের চওড়া জিনিস নিজের scroll container-এ সামলানো হবে।” ড্যাশবোর্ড, কোড-ব্লক আর লম্বা URL-ওয়ালা লেআউটের সবচেয়ে প্রচলিত বাগ এটিই।

৭ · ছবির গ্যালারি আর প্রাইসিং টেবিল

ভ্রমণ এজেন্সি বা ফটোগ্রাফারের সাইটে প্রায়ই এমন গ্যালারি দেখবেন, যেখানে কিছু ছবি বড়, কিছু ছোট, অথচ মাঝে কোনো ফাঁকা গর্ত নেই। Grid-এ এর উপকরণ তিনটি: কলামের কাঠামো, বড় ছবির জন্য span, আর গর্ত ভরাতে grid-auto-flow: dense. নিচের এডিটরে ক্রমের ব্যাপারটা স্পষ্ট দেখাতে কলাম ৪টি স্থির রাখা হয়েছে; বাস্তবের সাইটে সাধারণত repeat(auto-fill, minmax(8rem, 1fr)) লেখা হয়, যাতে কলামের সংখ্যা জায়গা দেখে বদলায়।

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* বোঝার সুবিধায় ৪টি স্থির কলাম */
  grid-auto-rows: 6rem;
  gap: 0.5rem;
  grid-auto-flow: dense;     /* পেছনের ছোট ছবি এনে গর্ত ভরাও */
}
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }
.big  { grid-column: span 2; grid-row: span 2; }

figure {
  margin: 0;
  border-radius: 8px;
  display: grid;
  place-items: end start;
  padding: 0.5rem;
  color: #fff;
  font: 600 0.85rem sans-serif;
}

আর Pinterest-এর মতো “masonry” — যেখানে ভিন্ন উচ্চতার কার্ড কলামে কলামে ইটের গাঁথুনির মতো বসে? এর জন্য আলাদা CSS নিয়ম নিয়ে ব্রাউজার আর CSS Working Group-এ কাজ চলছে, কিন্তু এখনো Baseline নয়। আজকের দিনে সবচেয়ে সহজ বিকল্প columns: 15rem (multi-column layout) — তবে সেখানে ক্রম যায় ওপর থেকে নিচে, কলাম ধরে; তারিখ-ক্রমের তালিকায় সেটা বিভ্রান্তিকর হতে পারে।

প্রাইসিং টেবিল — subgrid দিয়ে লাইনে লাইন মেলানো

ইন্টারনেট প্রোভাইডার বা হোস্টিং কোম্পানির সাইটে তিন-চারটি প্যাকেজ পাশাপাশি থাকে: নাম, দাম, সুবিধার তালিকা, বোতাম। সমস্যা: একটির সুবিধার তালিকা লম্বা হলে বাকিগুলোর বোতাম ওপরে-নিচে এলোমেলো হয়ে যায়। কার্ডগুলো আলাদা আলাদা বাক্স, একজন জানে না পাশেরটির তালিকা কত লম্বা। subgrid এই সমস্যা মেটায় — প্রতিটি কার্ড নিজের সারি না বানিয়ে বাইরের grid-এর সারি ধার করে, ফলে সব কার্ডের “দাম” সারি একই উচ্চতায়, “বোতাম” সারি একই লাইনে। subgrid ২০২৩ সাল থেকে সব প্রধান ব্রাউজারে চলে (Baseline); খুব পুরোনো ব্রাউজারে লাইনটি উপেক্ষিত হয়, কার্ড তবুও ঠিকঠাক দেখায় — শুধু লাইনগুলো মেলে না।

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1rem;
  font-family: sans-serif;
}
.plan {
  display: grid;
  grid-row: span 4;              /* নাম, দাম, তালিকা, বোতাম = ৪ সারি */
  grid-template-rows: subgrid;   /* সারিগুলো বাইরের grid থেকে ধার */
  row-gap: 0.5rem;
  border: 1px solid #cbd5e1; border-radius: 12px; padding: 1rem;
}
.plan h3, .plan p, .plan ul { margin: 0; }
.plan ul { padding-inline-start: 1.1rem; }
.price { font-size: 1.4rem; font-weight: 700; color: #1d4ed8; }
.plan a { align-self: end; text-align: center; padding: 0.5rem;
          background: #1d4ed8; color: #fff; border-radius: 8px;
          text-decoration: none; }
.popular { border-color: #1d4ed8; box-shadow: 0 0 0 1px #1d4ed8; }

৮ · কোন প্যাটার্ন কখন — সিদ্ধান্তের টেবিল আর রেসপন্সিভ আচরণের ঝলক

নতুন কোনো নকশা হাতে পেলে প্রথমে কোড নয়, কাগজে আয়তক্ষেত্র আঁকুন: পুরো পাতা কয় ভাগ, প্রতিটি ভাগের ভেতরে কী। তারপর প্রতিটি আয়তক্ষেত্রকে নিচের টেবিলের একটি প্রশ্নের সাথে মেলান।

রেসপন্সিভ আচরণের এক ঝলক

খেয়াল করেছেন, এই পর্বের বেশিরভাগ প্যাটার্ন কোনো @media ছাড়াই ফোনে ঠিক থাকে? Cluster ভাঁজ হয়, Sidebar আর Switcher নিজে সিদ্ধান্ত নেয়, auto-fit কলাম গোনে, পড়ার কলাম min() দিয়ে সরু হয়। এটাই intrinsic layout-এর শক্তি — নিয়ম দিন, ব্রাউজার হিসাব করবে। তবে সব কিছু নিয়ম দিয়ে হয় না। holy grail-এর মানচিত্র তিন কলাম থেকে এক কলামে বদলানো একটি নকশার সিদ্ধান্ত — ব্রাউজার নিজে জানে না aside-কে main-এর আগে না পরে দেবেন। সেখানে একটি শর্ত লিখতে হয়:

/* পর্ব ৩১-এ বিস্তারিত — এখানে শুধু আকারটা দেখুন */
@media (width < 48rem) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "nav" "main" "aside" "footer";
  }
}

width < 48rem হলো media query-র নতুন “range” লেখার রূপ, যা এখন Baseline; পুরোনো রূপ (max-width: 47.99rem). আরও এক ধাপ এগিয়ে, পুরো পর্দা নয় বরং কম্পোনেন্টের নিজের container কত চওড়া তা দেখে সাজ বদলাতে আছে container query (@container, ২০২৩ সাল থেকে Baseline). একটি কার্ড sidebar-এর সরু জায়গায় এক রকম, main-এর চওড়া জায়গায় আরেক রকম — এ কাজ media query পারে না, container query পারে। পর্ব ৩০-এ মোবাইল-ফার্স্ট ভাবনা আর viewport, পর্ব ৩১-এ media আর container query বিস্তারিত দেখবেন। আজকের নিয়ম মনে রাখুন: আগে intrinsic প্যাটার্ন দিয়ে যতটা সম্ভব সামলান, যেখানে নকশা সত্যিই বদলাতে হবে শুধু সেখানে breakpoint.

৯ · AI-এর যুগে — লেআউটের কাজ AI-কে দিলে কী দেখবেন

“একটা অ্যাডমিন ড্যাশবোর্ড বানিয়ে দাও” লিখলে AI এক মিনিটে কয়েকশো লাইন দিয়ে দেয়, আর ল্যাপটপের পর্দায় দেখতে বেশ ভালোও লাগে। সমস্যা ধরা পড়ে ফোনে খুললে, লেখা বড় করলে, বা শুধু কীবোর্ড দিয়ে চালালে। কারণ AI ইন্টারনেটের পুরোনো আর নতুন কোড মিশিয়ে শিখেছে; সে নির্দিষ্ট পর্দার মাপে “দেখতে ঠিক” লেআউট দেয়, কিন্তু সেটি সব মাপে, সব ব্যবহারকারীর জন্য ঠিক কি না, যাচাই করে না।

AI সাধারণত যেসব লেআউট-ভুল করে

AI-এর দেওয়া লেআউট হাতে পেলে — যাচাইয়ের চেকলিস্ট

• DevTools-এর device toolbar-এ ৩২০px থেকে ১৪৪০px পর্যন্ত টেনে দেখেছি — কোথাও পাশে স্ক্রল বা কাটা লেখা নেই
• DevTools-এর Grid আর Flex overlay (Elements প্যানেলে grid/flex ব্যাজ) চালু করে কলাম-সারির লাইন নিজের চোখে দেখেছি
• ব্রাউজারে ২০০% zoom করেছি — লেখা আর লেআউট ভেঙে পড়েনি (WCAG-এর reflow নিয়ম)
• শুধু Tab চেপে পুরো পাতা ঘুরেছি — focus চোখের ক্রমেই এগিয়েছে, হঠাৎ লাফায়নি
• validator.w3.org-এ HTML যাচাই করেছি, Lighthouse-এর অ্যাক্সেসিবিলিটি রিপোর্ট চালিয়েছি, আর অচেনা property পেলে MDN আর Can I use-এ Baseline অবস্থা দেখেছি