Grid গভীরে — template areas, auto-fit, minmax আর subgrid

১ · grid-template-areas — CSS-এর ভেতরে লেআউটের মানচিত্র

পর্ব ২৭-এ (CSS Grid — সারি আর কলামে দুই দিকের লেআউট) আপনি grid-এর মূল ধারণাগুলো দেখেছেন — grid container, সারি আর কলাম, fr একক, gap, আর লাইনের নম্বর ধরে item বসানো। এই পর্বে সেগুলো আবার বলব না; বরং দেখব পেশাদার লেআউটে রোজ কোন কৌশল লাগে, আর কোথায় সবাই হোঁচট খান।

প্রথম কৌশলটি সবচেয়ে “দেখতে সুন্দর”। লাইনের নম্বর (grid-column: 1 / 3) দিয়ে item বসানো কাজ করে ঠিকই, কিন্তু কয়েক সপ্তাহ পর কোড খুলে বোঝা কঠিন — “লাইন ৩ মানে যেন কোনটা?” তার বদলে CSS Grid আপনাকে লেআউটের একটি ছোট মানচিত্র সরাসরি CSS-এ আঁকতে দেয়। এর নাম grid-template-areas.

নিচের এডিটরে একটি ছোট দোকানের পাতা আছে। CSS-এর মাঝখানের তিন লাইন যেন একটি ASCII-ছবি — চোখে দেখেই বোঝা যায় পাতাটা কেমন হবে। তারপর প্রতিটি element-কে grid-area দিয়ে বলে দেওয়া হয়েছে সে কোন এলাকায় বসবে।

.page {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "head head"
    "side main"
    ".    foot";
  gap: 8px;
  min-height: 260px;
  font-family: sans-serif;
}
.page > * { padding: 10px; border-radius: 6px; margin: 0; }
header { grid-area: head; background: #bfdbfe; }
nav    { grid-area: side; background: #fde68a; }
main   { grid-area: main; background: #bbf7d0; }
footer { grid-area: foot; background: #e9d5ff; }

এই মানচিত্র লেখার কয়েকটি কড়া নিয়ম আছে। নিয়ম ভাঙলে ব্রাউজার কোনো error দেখায় না — পুরো ঘোষণাটি চুপচাপ বাতিল করে দেয়, তাই নিয়মগুলো জানা জরুরি। নিচের ডায়াগ্রামে দেখুন ব্রাউজার লেখাটি কীভাবে পড়ে:

২ · ছোট পর্দায় এলাকা বদল — আর DOM order-এর ফাঁদ

Template areas-এর আসল জাদু দেখা যায় রেসপন্সিভ কাজে। মোবাইলে সব এলাকা ওপর-নিচে এক কলামে, বড় পর্দায় পাশাপাশি — শুধু মানচিত্রটা বদলে দিলেই হলো, HTML-এ হাত দিতে হয় না। সাধারণত এটা করা হয় media query দিয়ে (বিস্তারিত পর্ব ৩১-এ)। নিচের এডিটরে একটু ভিন্ন পথ নেওয়া হয়েছে: ড্যাশ দেওয়া বাক্সটি একটি container query-র “পাত্র”, আর বাক্সের ডান-নিচের কোণ টেনে আপনি নিজেই তার চওড়া বদলাতে পারবেন — যেন হাতে ফোন আর ল্যাপটপ পাল্টাচ্ছেন।

<style>
  body { font-family: sans-serif; }
  .frame { container-type: inline-size; resize: horizontal;
           overflow: auto; border: 2px dashed #64748b; padding: 6px; }
  .layout { display: grid; gap: 8px;
            grid-template-areas: "main" "promo"; }
  @container (min-width: 420px) {
    .layout { grid-template-columns: 1fr 2fr;
              grid-template-areas: "promo main"; }
  }
  .main  { grid-area: main;  background: #bbf7d0; padding: 8px; }
  .promo { grid-area: promo; background: #fde68a; padding: 8px; }
  a:focus-visible { outline: 3px solid #dc2626; outline-offset: 2px; }
</style>
<div class="frame">
  <div class="layout">
    <div class="main"><b>আজকের অফার</b><br>
      <a href="#a">১. চাল কিনুন</a> · <a href="#b">২. ডাল কিনুন</a></div>
    <div class="promo"><a href="#c">৩. বিকাশে পেমেন্ট</a></div>
  </div>
</div>
<p>প্রিভিউতে একবার ক্লিক করে Tab চাপুন — লাল দাগ কোন ক্রমে ঘোরে?</p>

এই অমিলটাই grid-এর সবচেয়ে বড় অ্যাক্সেসিবিলিটি-ফাঁদ। ব্রাউজারের কাছে পাতার “আসল” ক্রম হলো DOM order — HTML-এ element যে ক্রমে লেখা। Grid (আর flexbox-এর order) শুধু আঁকার জায়গা বদলায়। কীবোর্ডের Tab, screen reader-এর পড়া, ব্রাউজারের reader mode, এমনকি কপি-পেস্ট — সবাই DOM order মেনে চলে। ফলে চোখে যা প্রথম, কীবোর্ড-ব্যবহারকারীর কাছে তা শেষে আসতে পারে।

৩ · নামের লাইন — [content-start] থেকে full-bleed লেখার পাতা

পর্ব ২৭-এ লাইনকে নম্বর দিয়ে ডেকেছেন: ১, ২, ৩, শেষেরটি −১। লাইনের নিজের নামও দেওয়া যায় — grid-template-columns-এ মাপের ফাঁকে ফাঁকে বর্গবন্ধনীতে নাম লিখে: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end]. একটি লাইনের একাধিক নাম থাকতে পারে (এখানে মাঝের লাইনটি একই সাথে sidebar-end আর main-start দুটোই)। এগুলোকে বলে named grid line.

এখানে একটি সুন্দর মিল আছে, যা অনেক অভিজ্ঞ ডেভেলপারও জানেন না। অংশ ১-এ দেখেছেন, এলাকা বানালে ব্রাউজার -start/-end নামের লাইন তৈরি করে। উল্টোটাও সত্য: আপনি যদি content-start আর content-end নামের লাইন বানান, ব্রাউজার আপনা-আপনি content নামের একটি এলাকা ধরে নেয়। তখন grid-column: content লিখলেই item ওই দুই লাইনের মাঝে বসে।

এই কৌশল দিয়ে ব্লগ বা সংবাদের লেখার পাতায় একটি জনপ্রিয় নকশা বানানো হয় — full-bleed লেআউট। লেখা মাঝখানে পড়ার মতো সরু কলামে থাকে, কিন্তু কোনো ছবি বা ব্যানার চাইলে পর্দার এক কিনারা থেকে আরেক কিনারা পর্যন্ত ছড়িয়ে যায় — কোনো বাড়তি wrapper div ছাড়াই।

.article {
  display: grid;
  grid-template-columns:
    [full-start] minmax(12px, 1fr)
    [content-start] minmax(0, 30rem) [content-end]
    minmax(12px, 1fr) [full-end];
  font-family: sans-serif;
}
/* content-start আর content-end থেকে "content" নামের এলাকা নিজেই তৈরি */
.article > * { grid-column: content; }
.article > .wide { grid-column: full; }

.wide {
  height: 90px; display: grid; place-items: center; margin: 0;
  background: linear-gradient(90deg, #0ea5e9, #22c55e);
  color: #fff; font-weight: 700;
}

Shorthand: grid-template আর grid — একটু সাবধানে

সারি, কলাম আর এলাকা একসাথে লেখার জন্য grid-template shorthand আছে। প্রতিটি সারির স্ট্রিংয়ের পাশে সেই সারির উচ্চতা, আর শেষে /-এর পরে কলামের মাপ:

.page {
  display: grid;
  grid-template:
    "head head" auto
    "side main" 1fr
    ".    foot" auto
    / 150px 1fr;
}

ছবির মতো পরিষ্কার, তাই অনেকে এটা পছন্দ করেন। কিন্তু তার বড় ভাই grid shorthand নিয়ে সতর্ক থাকুন। grid একসাথে explicit grid (grid-template-*) আর implicit grid-এর (grid-auto-rows, grid-auto-columns, grid-auto-flow) সব property ঠিক করে — যেগুলো লেখেননি, সেগুলো ডিফল্টে ফিরিয়ে দেয়। ফলে আগে কোথাও grid-auto-flow: dense বা grid-auto-rows: 200px লিখে রাখলে, পরে grid: ... লিখলে সেগুলো চুপচাপ মুছে যায়।

৪ · minmax() আর 1fr-এর লুকানো min-content

minmax(কমপক্ষে, সর্বোচ্চ) একটি কলাম বা সারিকে (grid-এর ভাষায় track) দুটি সীমা দেয়: এর চেয়ে সরু হবে না, এর চেয়ে চওড়াও হবে না। যেমন minmax(200px, 1fr) মানে “অন্তত 200px, জায়গা থাকলে বাকি অংশের এক ভাগ”। আর minmax(100px, auto) সারিতে দিলে মানে “অন্তত 100px উঁচু, লেখা বেশি হলে আরও উঁচু”।

এবার এমন একটি ঘটনা, যা প্রায় সবার সাথে একবার না একবার ঘটে। সংবাদের সাইটে দুটি সমান কলাম বানালেন — grid-template-columns: 1fr 1fr. সব ঠিকঠাক, যতক্ষণ না একদিন কোনো খবরে একটি লম্বা লিংক বা কোডের লাইন এলো। হঠাৎ কলাম দুটো আর সমান নেই, পুরো লেআউট ডানে উপচে গেল, ফোনে পাশে স্ক্রল শুরু হলো। নিজেই দেখুন:

<style>
  body { font-family: sans-serif; }
  .box { width: 320px; border: 2px dashed #64748b; margin-bottom: 14px; }
  .g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .g > p { background: #e0f2fe; padding: 6px; margin: 0; }
  /* সমাধান: কলামের নিচের সীমা 0, আর লম্বা শব্দ ভাঙার অনুমতি */
  .fix { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fix .url { overflow-wrap: anywhere; }
</style>
<b>সমস্যা: 1fr 1fr</b>
<div class="box"><div class="g">
  <p>সংবাদের সারাংশ এখানে কয়েকটি শব্দে লেখা</p>
  <p class="url">https://example.com/bangla_news/metro_rail_new_station_opening_2026</p>
</div></div>
<b>সমাধান: minmax(0, 1fr)</b>
<div class="box"><div class="g fix">
  <p>সংবাদের সারাংশ এখানে কয়েকটি শব্দে লেখা</p>
  <p class="url">https://example.com/bangla_news/metro_rail_new_station_opening_2026</p>
</div></div>

কেন এমন হয়? কারণ 1fr আসলে একা আসে না। স্পেসিফিকেশন অনুযায়ী 1fr মানে minmax(auto, 1fr) — আর grid item-এর জন্য auto নিচের সীমা মানে সেই item-এর min-content মাপ: লেখাকে যতটা সম্ভব ভেঙেও যতটুকু চওড়া লাগে। বাংলা বা ইংরেজি বাক্য শব্দে শব্দে ভাঙা যায়, তাই তার min-content ছোট। কিন্তু ফাঁকা জায়গাহীন লম্বা লিংক বা কোডের লাইন ভাঙা যায় না — পুরোটাই একটি “শব্দ”। (ব্রাউজার হাইফেন বা কিছু চিহ্নের পরে ভাঙতে পারে, তাই উদাহরণের লিংকে হাইফেনের বদলে _ রাখা হয়েছে।) ধাপে ধাপে হিসাবটা দেখুন:

1.g {2  width: 320px;  /* gap 8px */3  grid-template-columns: 1fr 1fr;4  /* = minmax(auto, 1fr) ×2 */5}6.url  /* লম্বা URL */

৫ · auto-fill বনাম auto-fit — media query ছাড়া রেসপন্সিভ কার্ড

অনলাইন দোকানের পণ্যের তালিকার কথা ভাবুন। বড় মনিটরে চারটি কার্ড পাশাপাশি, ট্যাবলেটে দুটি, ফোনে একটি। আগে এর জন্য কয়েকটি media query লিখে প্রতিটিতে কলামের সংখ্যা হাতে বলে দিতে হতো। Grid একটি লাইনেই এই কাজ করে দেয়, কারণ repeat()-এ সংখ্যার বদলে দুটি বিশেষ শব্দ দেওয়া যায়: auto-fill আর auto-fit. দুটিরই মানে “যতগুলো কলাম আঁটে, ততগুলো বানাও” — পার্থক্য শুধু খালি কলাম নিয়ে।

সারিতে item যথেষ্ট থাকলে দুটির কোনো পার্থক্য চোখে পড়ে না — পার্থক্য দেখা যায় কেবল তখন, যখন একটি সারি ভরানোর মতো item নেই। এবার সেই বিখ্যাত এক লাইনের কোড, প্রতিটি অংশসহ:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1rem;
}

বাংলায় পড়লে: “যতগুলো কলাম আঁটে বানাও (auto-fit); প্রতিটি কলাম অন্তত 250px — তবে container এর চেয়ে সরু হলে container-এর পুরো চওড়া (min(250px, 100%)); আর বাড়তি জায়গা 1fr নিয়মে সবাই সমান ভাগ করে নাও।” লেখক Una Kravets-সহ অনেকে এর নাম দিয়েছেন RAM — Repeat, Auto, Minmax. এবার নিজের হাতে বাক্সের চওড়া বদলে দেখুন:

<style>
  body { font-family: sans-serif; }
  .frame { resize: horizontal; overflow: auto; border: 2px dashed #64748b;
           padding: 8px; }
  .cards {
    display: grid;
    /* বাস্তবে সাধারণত 250px; প্রিভিউ ছোট বলে এখানে 150px */
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 10px;
  }
  .card { background: #fef3c7; border: 1px solid #f59e0b;
          border-radius: 8px; padding: 10px; }
</style>
<div class="frame">
  <div class="cards">
    <article class="card">🍚 মিনিকেট চাল<br>৳৭২/কেজি</article>
    <article class="card">🥣 মসুর ডাল<br>৳১১০/কেজি</article>
    <article class="card">🛢️ সয়াবিন তেল<br>৳১৭০/লিটার</article>
  </div>
</div>
<p>ড্যাশ দেওয়া বাক্সের ডান-নিচের কোণ টেনে সরু-চওড়া করুন।</p>

শেষ পরীক্ষাটিই এই কোডের সবচেয়ে কম বোঝা অংশ। পুরোনো অনেক টিউটোরিয়ালে (আর AI-এর উত্তরে) শুধু minmax(250px, 1fr) লেখা থাকে। সাধারণ ফোনে ঝামেলা হয় না, কিন্তু 250px-এর চেয়ে সরু জায়গায় — পুরোনো ছোট ফোন, পাশে padding থাকা container, বা একটি সরু sidebar-এর ভেতরে — কার্ড বাইরে উপচে পড়ে। নিচের ডায়াগ্রামে container-এর চওড়া বদলে ব্রাউজারের হিসাব দেখুন (gap 16px ধরে):

৬ · কনটেন্ট দেখে মাপ — min-content, max-content আর fit-content()

এতক্ষণ কলামের মাপ দিয়েছি নির্দিষ্ট সংখ্যায় (150px) বা ভাগে (1fr) লিখে। তৃতীয় একটি পথ আছে: ভেতরের লেখা দেখে মাপ ঠিক করা। একে বলে intrinsic sizing — “নিজের ভেতরের জিনিস অনুযায়ী মাপ”। তিনটি শব্দ মনে রাখুন:

<style>
  body { font-family: sans-serif; }
  .g { display: grid; gap: 6px; margin-bottom: 16px;
       grid-template-columns: min-content max-content fit-content(170px) 1fr; }
  .g > div { background: #ede9fe; padding: 6px; }
  /* বাস্তব কাজ: লেবেল যত চওড়া দরকার, বাকিটা ইনপুটের */
  .form { display: grid; grid-template-columns: max-content 1fr;
          gap: 8px 12px; align-items: center; max-width: 420px; }
</style>
<div class="g">
  <div>min-content: যত সরু সম্ভব</div>
  <div>max-content: এক লাইনে পুরোটা</div>
  <div>fit-content(170px): দরকার মতো চওড়া, তবে 170px-এর বেশি কখনো নয়</div>
  <div>1fr: বাকি জায়গা</div>
</div>
<form class="form">
  <label for="n">নাম</label> <input id="n">
  <label for="m">মোবাইল নম্বর</label> <input id="m" inputmode="tel">
</form>

এই শব্দগুলো শুধু grid-এ নয়, width-এও কাজ করে: width: fit-content দিলে একটি block element (যেমন একটি বোতামের মতো লিংক) তার লেখার সমান চওড়া হয়, পুরো লাইন জোড়ে না। এগুলো Baseline Widely available — নিশ্চিন্তে ব্যবহার করতে পারেন। একটি সতর্কতা: max-content কখনো লেখা ভাঙে না, তাই লম্বা লেখায় দিলে অংশ ৪-এর মতোই উপচে পড়বে।

৭ · subgrid — পাশের কার্ডের সাথে সারি মেলানো, আর masonry-র খবর

বাস টিকিটের সাইটে তিনটি কার্ড পাশাপাশি। একটির শিরোনাম এক লাইনের, আরেকটির তিন লাইনের। ফলে নিচের বিবরণ আর “টিকিট কিনুন” বোতাম তিন কার্ডে তিন উচ্চতায় — দেখতে অগোছালো। সমস্যার মূল: প্রতিটি কার্ড নিজের ভেতরের grid নিজে নিজে হিসাব করে, পাশের কার্ডের শিরোনাম কত লম্বা তা সে জানে না।

subgrid এই দেয়াল ভেঙে দেয়। কার্ডকে বলা হয়: “নিজের সারি বানিয়ো না, বাইরের grid-এর সারিগুলোই ধার নাও।” তখন সব কার্ডের শিরোনাম একই সারিতে, আর সেই সারির উচ্চতা ঠিক হয় সবচেয়ে লম্বা শিরোনাম দেখে। অনেকটা পরীক্ষার খাতার ছাপানো লাইনের মতো — সবার খাতায় একই লাইন, তাই প্রশ্ন নম্বর ১-এর উত্তর সবার খাতায় একই উচ্চতায় শুরু হয়।

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 10px;
  font-family: sans-serif;
}
.card {
  display: grid;
  grid-row: span 3;              /* বাইরের grid-এর ৩টি সারি জুড়ে */
  grid-template-rows: subgrid;   /* সেই ৩টি সারিই ভেতরে ব্যবহার */
  gap: 6px;
  border: 1px solid #94a3b8; border-radius: 8px; padding: 10px;
}
.card h3, .card p { margin: 0; }
.card h3 { font-size: 1rem; background: #e0f2fe; }
.card a { align-self: end; background: #16a34a; color: #fff;
          padding: 6px; text-align: center; border-radius: 6px; }

কয়েকটি বিষয় খেয়াল করুন। প্রথমত, grid-row: span 3 দিয়ে কার্ডকে বাইরের grid-এর তিনটি সারি জুড়তে হয় — subgrid শুধু সেই সারিগুলোই ধার নিতে পারে, যেগুলো সে জুড়ে আছে। দ্বিতীয়ত, subgrid এক দিকেও হয় (শুধু সারি বা শুধু কলাম), দুই দিকেও।

যা এখনো আসেনি — masonry, ওরফে grid-lanes

Pinterest-এর মতো ছবির দেয়াল দেখেছেন? কলাম সমান, কিন্তু প্রতিটি ছবি নিজের উচ্চতায়, আর ছোট ছবির নিচে ফাঁক না রেখে পরের ছবি উঠে আসে — ইটের গাঁথুনির মতো। একে বলে masonry layout. সাধারণ grid এটা পারে না, কারণ grid-এ সারি থাকে, আর একটি সারির উচ্চতা ঠিক হয় তার সবচেয়ে লম্বা item দেখে — ফলে ছোট ছবির নিচে ফাঁক থেকে যায়। এতদিন এর জন্য JavaScript library বা CSS multi-column-এর মতো আধা-সমাধান ব্যবহার হয়েছে, যেখানে ক্রম ওপর-নিচে চলে, পাশাপাশি নয়।

৮ · সব একসাথে — একটি বাংলা সংবাদ সাইটের ম্যাগাজিন লেআউট

খবরের কাগজের প্রথম পাতা আসলে একটি grid — ওপরে কাগজের নাম, তার নিচে বড় ছবিসহ প্রধান খবর, পাশে “সর্বশেষ” কলাম, নিচে ছোট ছোট খবর, তারপর ছবির সারি। কাগজের সম্পাদক যেমন পাতা “মেকআপ” করেন, আমরাও তেমনি এই পর্বের প্রায় সব কৌশল এক জায়গায় আনব: template areas, minmax(0, 1fr), ছোট পর্দায় এলাকা বদল, auto-fill ছবির টালি আর aspect-ratio.

ছবির গ্যালারিতে aspect-ratio একটি বড় সমস্যা মেটায়: সব টালির অনুপাত এক রাখা (যেমন বর্গাকার 1 বা চওড়া 16 / 9), কলাম যত চওড়াই হোক। ছবি আসার আগেই জায়গা ঠিক থাকে, তাই লোড হওয়ার সময় পাতা লাফায় না (পর্ব ৬-এর layout shift দেখুন)। আসল ছবি দিলে সাথে object-fit: cover দেবেন, যাতে ছবি না চেপে টালি ভরে। এখানে ছবির বদলে রং আর emoji ব্যবহার করা হয়েছে।

.paper {
  display: grid; gap: 10px; font-family: sans-serif;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "mast mast mast mast"
    "lead lead s1   side"
    "lead lead s2   side"
    "gal  gal  gal  gal";
}
@media (max-width: 520px) {
  .paper { grid-template-columns: minmax(0, 1fr);
           grid-template-areas: "mast" "lead" "s1" "s2" "side" "gal"; }
}
.mast { grid-area: mast; text-align: center; border-bottom: 3px double #111; }
.lead { grid-area: lead; } .s1 { grid-area: s1; } .s2 { grid-area: s2; }
.side { grid-area: side; background: #f1f5f9; padding: 8px; }
.gal  { grid-area: gal; }
.paper h2, .paper h3, .paper p { margin: 4px 0; }
.pic { aspect-ratio: 16 / 9; border-radius: 6px;
       background: linear-gradient(135deg, #0ea5e9, #22c55e); }
.tiles { display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(min(110px, 100%), 1fr)); }
.tiles div { aspect-ratio: 1; border-radius: 6px; display: grid;
  place-items: center; font-size: 28px; background: #fde68a; }

নকশাটির কয়েকটি সূক্ষ্ম সিদ্ধান্ত খেয়াল করুন। কলাম repeat(4, 1fr) নয়, repeat(4, minmax(0, 1fr)) — খবরে লম্বা লিংক বা ইংরেজি শব্দ এলেও পাতা ভাঙবে না। HTML-এ খবরগুলো গুরুত্বের ক্রমে লেখা: নাম, প্রধান খবর, ছোট খবর, তারপর “সর্বশেষ” — তাই চওড়া পর্দায় “সর্বশেষ” ডানে সরলেও screen reader-এ পড়ার ক্রম অর্থবহই থাকে। আর প্রতিটি খবর <article>, পাশের কলাম <aside> — grid-এর নকশা যা-ই হোক, semantic HTML (পর্ব ১০) একই থাকে।

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

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

AI সাধারণত যেসব ভুল করে

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

• DevTools-এর grid overlay চালু করে (Elements প্যানেলে grid ব্যাজে ক্লিক) লাইন আর এলাকার নাম দেখেছি — AI যা বলেছে, তাই হয়েছে
• Device toolbar-এ ৩২০px চওড়ায় দেখেছি — পাশে কোনো স্ক্রল নেই
• একটি কার্ডে খুব লম্বা লিংক বা ইংরেজি শব্দ বসিয়ে দেখেছি — কলাম সমান থেকেছে
• শুধু Tab চেপে পুরো পাতা ঘুরেছি — focus চোখের ক্রমের সাথে মিলেছে
• নতুন কোনো property (subgrid, masonry, reading-flow) পেলে MDN-এ পড়েছি আর Can I use-এ Baseline অবস্থা দেখেছি; HTML validator.w3.org-এ আর Lighthouse-এর অ্যাক্সেসিবিলিটি রিপোর্টও চালিয়েছি